jQuery Wookmark 瀑布流布局 Remote API 远程 API 加载数据

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/reset.css">
		<link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/main.css">
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/wookmark/js/jquery.imagesloaded.js">
		</script>
		<script src="//ku.shouce.ren/libs/wookmark/js/jquery.wookmark.min.js">
		</script>
	</head>
	<body>
		<div class="main">
			<div class="inwrap">
				<h1>jQuery Wookmark 瀑布流布局
				</h1>
				<h2>Remote API 远程 API 加载数据
				</h2>
				<div class="detail">
					<p>该示例演示从远程 API 获取数据，并进行布局。
					</p>
					<p>向下滚动可以加载更多，内容通过 
						<a target="_blank" href="https://www.wookmark.com/about/api">Wookmark API
						</a> 获取。
					</p>
					<p>因为使用远程接口获取数据，以及下载图片，加载时间可能会有些长。
					</p>
				</div>
				<div class="example">
					<div id="main" role="main">
						<ul id="tiles">
							
						</ul>
						<div id="loader">
							<div id="loaderCircle">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			(function ($){
				var handler = null,
					page = 1,
					isLoading = false,
					apiURL = 'https://www.wookmark.com/api/json/popular';
				// Prepare layout options.
				var options = {
					autoResize: true, // This will auto-update the layout when the browser window is resized.
					container: $('#tiles'), // Optional, used for some extra CSS styling
					offset: 2, // Optional, the distance between grid items
					itemWidth: 210 // Optional, the width of a grid item
				};
				/**
   * When scrolled all the way to the bottom, add more tiles.
   */
				function onScroll(event){
					// Only check when we're not still waiting for data.
					if (!isLoading) {
						// Check if we're within 100 pixels of the bottom edge of the broser window.
						var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
						if(closeToBottom) {
							loadData();
						}
					}
				};
				/**
   * Refreshes the layout.
   */
				function applyLayout(){
					options.container.imagesLoaded(function(){
						// Create a new layout handler when images have loaded.
						handler = $('#tiles li');
						handler.wookmark(options);
					}
												  );
				};
				/**
   * Loads data from the API.
   */
				function loadData(){
					isLoading = true;
					$('#loaderCircle').show();
					$.ajax({
						url: apiURL,
						dataType: 'jsonp',
						data: {
							page: page}
						, // Page parameter to make sure we load new data
						success: onLoadData
					}
						  );
				};
				/**
   * Receives data from the API, creates HTML for images and updates the layout
   */
				function onLoadData(data){
					isLoading = false;
					$('#loaderCircle').hide();
					// Increment page index for future calls.
					page++;
					// Create HTML for the images.
					var html = '';
					var i = 0, length=data.length, image;
					for(; i < length; i++) {
						image = data[i];
						html += '<li>';
						// Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
						html += '<img src="' + image.preview + '" width="200" height="' + Math.round(image.height / image.width * 200) + '">';
						// Image title.
						html += '<p>' + image.title + '</p>';
						html += '</li>';
					}
					// Add image HTML to the page.
					$('#tiles').append(html);
					// Apply layout.
					applyLayout();
				};
				// Capture scroll event.
				$(document).bind('scroll', onScroll);
				// Load first data from the API.
				loadData();
			}
			)(jQuery);
		</script>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/reset.css">
        <link rel="stylesheet" href="//ku.shouce.ren/libs/wookmark/css/main.css">
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/wookmark/js/jquery.imagesloaded.js">
        </script>
        <script src="//ku.shouce.ren/libs/wookmark/js/jquery.wookmark.min.js">
        </script>
    </head>
    <body>
        <div class="main">
            <div class="inwrap">
                <h1>jQuery Wookmark 瀑布流布局
                </h1>
                <h2>Remote API 远程 API 加载数据
                </h2>
                <div class="detail">
                    <p>该示例演示从远程 API 获取数据，并进行布局。