bootstrap瀑布流代码

 <extend name="Base/common" />
 <block name="search-cate"> <include file="Public/jlbnav" /></BLOCK>
 <block name="content">
 <div class="container mt20">
     <div class="container-fluid" id="masonry">

     </div>

     <div id="masonry_ghost" class="hide">
         <volist name="list" id="vo">
             <div class="thumbnail">
                 <div class="imgs">
                     <input type="hidden" value="/{$vo.thumb}">
                 </div>
                 <div class="caption">
                     <div class="title">{$i}简单OA管理系统</div>
                     <div class="content">

                     </div>
                     <div class="author">by <a target="_blank" href="">小小生</a></div>
                 </div>
             </div>
         </volist>

     </div>
 </div>
     加bootstrap  jquery js
     <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
     <script src="http://fineui.com/lib/imagesloaded.pkgd.min.js"></script>
     <script src="http://fineui.com/lib/lightbox-2.6.min.js"></script>
 <script>
         $(function() {

             var ghostNode = $('#masonry_ghost').find('.thumbnail'), i, ghostIndexArray = []; //定义变量
             var ghostCount = ghostNode.length;

             for(i=0; i<ghostCount; i++){
                 ghostIndexArray[i] = i;
             }
             ghostIndexArray.sort(function(a, b) {
                 if(Math.random() > 0.5) {
                     return a - b;
                 } else {
                     return b - a;
                 }
             });
             //上面js是页面打开时自动加载运算，随机排列。
             var currentIndex = 0;
             var masNode = $('#masonry');//要加载的div主框架
             var imagesLoading = false;//标记

             function getNewItems() {
                 var newItemContainer = $('<div/>');
                 for(var i=0; i<12; i++) {
                     if(currentIndex < ghostCount) {
                         newItemContainer.append(ghostNode.get(ghostIndexArray[currentIndex]));
                         currentIndex++;
                     }
                 }
                 return newItemContainer.find('.thumbnail');
             }

             function processNewItems(items) {
                 items.each(function() {
                     var $this = $(this);
                     var imgsNode = $this.find('.imgs');
                     var title = $this.find('.title').text();
                     var author = $this.find('.author').text();
                     title += '&nbsp;&nbsp;(' + author + ')';
                     var lightboxName = 'lightbox_'; // + imgNames[0];

                     var imgNames = imgsNode.find('input[type=hidden]').val().split(',');
                     $.each(imgNames, function(index, item) {
                         imgsNode.append('<a href="'+ item +'" data-lightbox="'+ lightboxName +'" title="'+ title +'"><img src="'+ item +'" /></a>');
                     });
                 });
             }

             function initMasonry() {
                 var items = getNewItems().css('opacity', 0);
                 processNewItems(items);
                 masNode.append(items);

                 imagesLoading = true;
                 items.imagesLoaded(function(){
                     imagesLoading = false;
                     items.css('opacity', 1);
                     masNode.masonry({
                         itemSelector: '.thumbnail',
                         isFitWidth: true
                     });
                 });
             }

             function appendToMasonry() {
                 var items = getNewItems().css('opacity', 0);

                 processNewItems(items);
                 masNode.append(items);

                 imagesLoading = true;
                 items.imagesLoaded(function(){
                     imagesLoading = false;
                     items.css('opacity', 1);
                     masNode.masonry('appended',  items);
                 });
             }

             function ajaxItem(){
                 var items = $('#masonry_ghost').find('.thumbnail').css('opacity', 0);

                 processNewItems(items);
                 masNode.append(items);
                 imagesLoading = true;

                 items.imagesLoaded(function(){

                     items.css('opacity', 1);
                     masNode.masonry('appended',  items);
                     imagesLoading = false;
                 });
             }

             initMasonry();
             var page =2; //分页
             var ttt=1;
             $(window).scroll(function() {
                 if(arguments.callee.timer) clearTimeout(arguments.callee.timer);//解决FIRFOX下滚动多次
                 if($(document).height() - $(window).height() - $(document).scrollTop() < 30) {
                     arguments.callee.timer = setTimeout(getdiv,400);
                 }

             });

             function getdiv(){
                 if(!imagesLoading) {
                     $.ajax({
                         url: '{:U("Tulebu/getsharedata")}',
                         type: 'POST',
                         dataType: 'text',
                         data: {'page': page},
                         async:false,
                     })
                     .done(function(data) {
                         if(data.length<2){
                             imagesLoading = true;
                             return;
                         }
                         $('#masonry_ghost').append(data);
                         page+=1;
                         ajaxItem();
                     })
                     .fail(function() {
                         console.log("error");
                     })
                     .always(function() {
                         console.log("complete");
                     });
                 }
             }

             function randomColor() {
                 var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
                 for (; rand.length < 6;) {
                     rand = '0' + rand;
                 }
                 return '#' + rand;
             }

             // var page=0;
             // function getdata(){
             //     $.$.post('{:U('Julebu/')}', param1: 'value1', function(data, textStatus, xhr) {
             //         /*optional stuff to do after success */
             //     });
             // }

         });
     </script>
 </block>