瀑布流的外掛程式jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html裡面有很多，但是都是英文的，因為項目需要，就自己寫了一個簡單的例子
其實瀑布流就是用了固定的寬度或者高度產生一堆不規則的div來展現出來的。
流程是
1：初始化頁面的時候載入一次資料
2.當頁面到底部的時候再次載入資料
3，重複以上操作直到沒有資料
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!--樣式--> <style type="text/css">body {margin:40px auto; width:800px; font-size:12px; color:#666;} .item{ border: 1px solid #D4D4D4; color: red; margin: 0 10px 10px 0; padding: 10px; position: relative; width: 200px; } .loading-wrap{ bottom: 50px; width: 100%; height: 52px; text-align: center; display: none; } .loading { padding: 10px 10px 10px 52px; height: 32px; line-height: 28px; color: #FFF; font-size: 20px; border-radius: 5px; background: 10px center rgba(0,0,0,.7); } .footer{ border: 2px solid #D4D4D4; } </style> <!--樣式--> </head> <body> <!--引入所需要的jquery和外掛程式--> <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script> <!--引入所需要的jquery和外掛程式--> <!--瀑布流--> <div id="container" class=" container"> <!--這裡通過設定每個div不同的高度，來凸顯布局的效果--> <volist name="height" id="vo"> <div class="item" style="height:{$vo}px;">瀑布流下來了</div> </volist> </div> <!--瀑布流--> <!--載入中--> <div id="loading" class="loading-wrap"> <span class="loading">載入中，請稍後...</span> </div> <!--載入中--> <!--尾部--> <div class="footer"><center>我是頁尾</center></div> <!--尾部--> <script type="text/javascript">$(function(){ //頁面初始化時執行瀑布流 var $container = $('#container'); $container.masonry({ itemSelector : '.item', isAnimated: true }); //使用者拖動捲軸，達到底部時ajax載入一次資料 var loading = $("#loading").data("on", false);//通過給loading這個div增加屬性on，來判斷執行一次ajax請求 $(window).scroll(function(){ if(loading.data("on")) return; if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//頁面拖到底部了 //載入更多資料 loading.data("on", true).fadeIn(); //在這裡將on設為true來阻止繼續的ajax請求 $.get( "getMore", function(data){ //擷取到了資料data,後面用JS將資料新增到頁面上 var html = ""; if($.isArray(data)){ for(i in data){ html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下來了</div>"; } var $newElems = $(html).css({ opacity: 0 }).appendTo($container); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); //一次請求完成，將on設為false，可以進行下一次的請求 loading.data("on", false); } loading.fadeOut(); }, "json" ); } }); }); </script> </body> </html>
在Action裡添加
class UserAction extends Action{ //初始化的資料 public function index(){ for ($i=0;$i<10;$i++){ $res[$i] = rand(100, 400); } $this->assign('height', $res); $this->display(); } //擷取一次請求的資料 public function getMore(){ for ($i=0;$i<6;$i++){ $res[$i] = rand(100, 400); } $this->ajaxReturn($res); } }注意：
通過判斷視窗是否滾動到頁面底部來決定用ajax載入一次資料。如果不做處理，會一下子請求很多次。所以，要使用條件來限制。
我使用的是往一個元素上賦值 $("#loading").data("on", true);，在請求期間判斷是true則不繼續請求，然後在頁面請求完成後再賦值為false
在真實的例子中，Action裡初始化資料的時候，要從資料庫調用一次資料。
而在getMore中也要在到底部的時候載入一次資料，所以一定得保證這兩次不要將從資料庫請求的資料重複了。或者可以做判斷來完成.~要不然就會造成載入重複資料的結果。
有共同愛好的朋友可以加群252799167
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
