瀑布流顯示

標籤：style   http   color   io   os   ar   java   for   sp   

<!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(                 "{:U(‘Index/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);     } }

瀑布流顯示