jQuery Wookmark 瀑布流布局 PHP server PHP 加载数据

实例代码“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">
		<style>
			/**
			* Grid items
			*/
			#tiles li{
				opacity:0;
				-webkit-transition:all 0.8s ease-out;
				-moz-transition:all 0.8s ease-out;
				-o-transition:all 0.8s ease-out;
				transition:all 0.8s ease-out;
			}
		</style>
		<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>PHP server PHP 加载数据
				</h2>
				<div class="detail">
					<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 $tiles = $('#tiles'),
					$handler = $('li', $tiles),
					page = 1,
					isLoading = false,
					apiURL = '/static/php/wookmark/server.php',
					lastRequestTimestamp = 0,
					fadeInDelay = 2000,
					$window = $(window),
					$document = $(document);
				// 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) {
							// Only allow requests every second
							var currentTime = new Date().getTime();
							if (lastRequestTimestamp < currentTime - 1000) {
								lastRequestTimestamp = currentTime;
								loadData();
							}
						}
					}
				};
				/**
   * Refreshes the layout.
   */
				function applyLayout($newImages){
					options.container.imagesLoaded(function(){
						// Destroy the old handler
						if ($handler.wookmarkInstance) {
							$handler.wookmarkInstance.clear();
						}
						// Create a new layout handler.
						$tiles.append($newImages);
						$handler = $('li', $tiles);
						$handler.wookmark(options);
						// Set opacity for each new image at a random time
						$newImages.each(function(){
							var $self = $(this);
							window.setTimeout(function(){
								$self.css('opacity', 1);
							}
											  , Math.random() * fadeInDelay);
						}
									   );
					}
												  );
				};
				/**
   * Loads data from the API.
   */
				function loadData(){
					isLoading = true;
					$('#loaderCircle').show();
					$.ajax({
						url: apiURL,
						dataType: 'json', // Set to jsonp if you use a server on a different domain and change it's setting accordingly
						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(response){
					isLoading = false;
					$('#loaderCircle').hide();
					// Increment page index for future calls.
					page++;
					// Create HTML for the images.
					var html = '',
						data = response.data,
						i = 0, length = data.length, image, opacity,
						$newImages;
					for (; i < length; i++) {
						image = data[i];
						html += '<li>';
						html += '<a target="_blank" href="'+image.image+'" title="'+image.title+'">';
						// 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)+'">';
						html += '</a>';
						// Image title.
						html += '<p>'+image.title+'</p>';
						html += '</li>';
					}
					$newImages = $(html);
					// Disable requests if we reached the end
					if (response.message == 'No more pictures') {
						$document.off('scroll', onScroll);
					}
					// Apply layout.
					applyLayout($newImages);
				};
				// Capture scroll event.
				$document.on('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">
        <style>
            /**
            * Grid items
            */
            #tiles li{
                opacity:0;
                -webkit-transition:all 0.8s ease-out;
                -moz-transition:all 0.8s ease-out;
                -o-transition:all 0.8s ease-out;
                transition:all 0.8s ease-out;
            }
        </style>
        <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>