瀑布流的实现
1，页面初始化时，调用插件进行一次排版；
2，当用户将滚动条拖到底部时，用ajax加载一次数据，并排版显示
3，重复2，直到无数据
html代码 ：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <!--样式--> 7 <style type="text/css"> 8 body {margin:40px auto; width:800px; font-size:12px; color:#666;} 9 .item{ 10 border: 1px solid #D4D4D4; 11 color: red; 12 margin: 0 10px 10px 0; 13 padding: 10px; 14 position: relative; 15 width: 200px; 16 } 17 .loading-wrap{ 18 bottom: 50px; 19 width: 100%; 20 height: 52px; 21 text-align: center; 22 display: none; 23 } 24 .loading { 25 padding: 10px 10px 10px 52px; 26 height: 32px; 27 line-height: 28px; 28 color: #FFF; 29 font-size: 20px; 30 border-radius: 5px; 31 background: 10px center rgba(0,0,0,.7); 32 } 33 .footer{ 34 border: 2px solid #D4D4D4; 35 } 36 </style> 37 <!--样式--> 38 </head> 39 <body> 40 <!--引入所需要的jquery和插件--> 41 <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script> 42 <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script> 43 <!--引入所需要的jquery和插件--> 44 <!--瀑布流--> 45 <div id="container" class=" container"> 46 <!--这里通过设置每个div不同的高度，来凸显布局的效果--> 47 <volist name="height" id="vo"> 48 <div class="item" style="height:{$vo}px;">瀑布流下来了</div> 49 </volist> 50 </div> 51 <!--瀑布流--> 52 <!--加载中--> 53 <div id="loading" class="loading-wrap"> 54 <span class="loading">加载中，请稍后...</span> 55 </div> 56 <!--加载中--> 57 <!--尾部--> 58 <div class="footer"><center>我是页脚</center></div> 59 <!--尾部--> 60 <script type="text/javascript"> 61 $(function(){ 62 //页面初始化时执行瀑布流 63 var $container = $('#container'); 64 $container.masonry({ 65 itemSelector : '.item', 66 isAnimated: true 67 }); 68 //用户拖动滚动条，达到底部时ajax加载一次数据 69 var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求 70 $(window).scroll(function(){ 71 if(loading.data("on")) return; 72 if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了 73 //加载更多数据 74 loading.data("on", true).fadeIn(); //在这里将on设为true来阻止继续的ajax请求 75 $.get( 76 "{:U('Index/getMore')}", 77 function(data){ 78 //获取到了数据data,后面用JS将数据新增到页面上 79 var html = ""; 80 if($.isArray(data)){ 81 for(i in data){ 82 html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下来了</div>"; 83 } 84 var $newElems = $(html).css({ opacity: 0 }).appendTo($container); 85 $newElems.imagesLoaded(function(){ 86 $newElems.animate({ opacity: 1 }); 87 $container.masonry( 'appended', $newElems, true ); 88 }); 89 //一次请求完成，将on设为false，可以进行下一次的请求 90 loading.data("on", false); 91 } 92 loading.fadeOut(); 93 }, 94 "json" 95 ); 96 } 97 }); 98 }); 99 </script> 100 </body> 101 </html>
