快速写一个瀑布流效果

瀑布流效果需在服务器环境下实现,Infinite Scroll是基于Ajax。高大上你也能立刻拥有!无限滚动,效果图截图:因为赖就不弄gif,对!
瀑布流效果图
一、创建pubuliu.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.grid{max-width: 1160px;margin: 0 auto;line-height: 0;}
		.grid-item{width: 280px;margin-bottom: 10px;}
	</style>
</head>
<body>
	<div class="grid">

		<div class="grid-item">
			<img src="images/1.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/2.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/3.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/4.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/5.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/6.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/7.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/8.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/9.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/10.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/11.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/12.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/13.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/14.jpg" alt="">
		</div>
		<div class="grid-item">
			<img src="images/15.jpg" alt="">
		</div>	
	</div>


	<div class="navigation">
		<a href="/page.html?page=1"></a>
	</div>


	<script src="js/jquery.js"></script>            #导入jquery库
	<script src="js/masonry.pkgd.min.js"></script>  #导入masonry库,官网http://masonry.desandro.com/
	<script src="js/jquery.infinitescroll.js"></script>   #导入Infinite Scroll,Github:https://github.com/infinite-scroll/infinite-scroll
	<script src="js/main.js"></script>
</body>
</html>

二、创建main.js

$(document).on("ready",function(){
	var grid=$('.grid')
	$('.grid').masonry({
	  // options
	  itemSelector: '.grid-item',
	  columnWidth: 290
	});

	// infinitescroll() is called on the element that surrounds 
	// the items you will be loading more of
	$('.grid').infinitescroll({
 
      navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
      nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
      itemSelector : ".grid-item"          
                   // selector for all items you'll retrieve
    },function(html){
    	// console.log(html);

    	var $items = $(html),
    		count=0;
    	$items.find("img").on("load",function(){
    		count++;
    		if(count==$items.length){
    			grid.append( $items )
		    		// add and lay out newly appended items
		    		.masonry( 'appended', $items );
    		}
    	});

    	
    });
});

三、创建page.html

<div class="grid-item">
	<img src="images/1.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/2.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/3.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/4.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/5.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/6.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/7.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/8.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/9.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/10.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/11.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/12.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/13.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/14.jpg" alt="">
</div>
<div class="grid-item">
	<img src="images/15.jpg" alt="">
</div>

到这里已经完全ok了,对的,恭喜你可以用去装逼了。小小说明:图片宽度一样,然后这代码单个图片宽度div定义了280px,一排显示四张图片就是4x280px=1120,加上间隔40px就是1160px了!
【学习资料】http://i.youku.com/u/UNTExMjUyODQ4/playlists

发表评论

电子邮件地址不会被公开。