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>
时间： 2024-08-30 13:13:27