bootstrap瀑布流代码

  1 <extend name="Base/common" />
  2 <block name="search-cate"> <include file="Public/jlbnav" /></BLOCK>
  3 <block name="content">
  5 <div class="container mt20">
  6     <div class="container-fluid" id="masonry">
  7         
  8     </div>
  9 
 10     <div id="masonry_ghost" class="hide">
 11         <volist name="list" id="vo">
 12             <div class="thumbnail">
 13                 <div class="imgs">
 14                     <input type="hidden" value="/{$vo.thumb}">
 15                 </div>
 16                 <div class="caption">
 17                     <div class="title">{$i}简单OA管理系统</div>
 18                     <div class="content">
 19                         
 20                     </div>
 21                     <div class="author">by <a target="_blank" href="">小小生</a></div>
 22                 </div>
 23             </div>
 24         </volist>
 25         
 26     </div>
 27 </div>
 28     加bootstrap  jquery js
 29     <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
 30     <script src="http://fineui.com/lib/imagesloaded.pkgd.min.js"></script>
 31     <script src="http://fineui.com/lib/lightbox-2.6.min.js"></script>
 32 <script>
 33         $(function() {
 34         
 35             var ghostNode = $(‘#masonry_ghost‘).find(‘.thumbnail‘), i, ghostIndexArray = []; //定义变量
 36             var ghostCount = ghostNode.length;
 37 
 38             for(i=0; i<ghostCount; i++){
 39                 ghostIndexArray[i] = i; 
 40             }
 41             ghostIndexArray.sort(function(a, b) {
 42                 if(Math.random() > 0.5) {
 43                     return a - b;
 44                 } else {
 45                     return b - a;
 46                 }
 47             });
 48             //上面js是页面打开时自动加载运算，随机排列。
 49             var currentIndex = 0;
 50             var masNode = $(‘#masonry‘);//要加载的div主框架
 51             var imagesLoading = false;//标记
 52             
 53             function getNewItems() {
 54                 var newItemContainer = $(‘<div/>‘);
 55                 for(var i=0; i<12; i++) {
 56                     if(currentIndex < ghostCount) {
 57                         newItemContainer.append(ghostNode.get(ghostIndexArray[currentIndex]));
 58                         currentIndex++;
 59                     }
 60                 }
 61                 return newItemContainer.find(‘.thumbnail‘);
 62             }
 63             
 64             function processNewItems(items) {
 65                 items.each(function() {
 66                     var $this = $(this);
 67                     var imgsNode = $this.find(‘.imgs‘);
 68                     var title = $this.find(‘.title‘).text();
 69                     var author = $this.find(‘.author‘).text();
 70                     title += ‘&nbsp;&nbsp;(‘ + author + ‘)‘;
 71                     var lightboxName = ‘lightbox_‘; // + imgNames[0];
 72                     
 73                     var imgNames = imgsNode.find(‘input[type=hidden]‘).val().split(‘,‘);
 74                     $.each(imgNames, function(index, item) {
 75                         imgsNode.append(‘<a href="‘+ item +‘" data-lightbox="‘+ lightboxName +‘" title="‘+ title +‘"><img src="‘+ item +‘" /></a>‘);
 76                     });
 77                 });
 78             }
 79             
 80             function initMasonry() {
 81                 var items = getNewItems().css(‘opacity‘, 0);
 82                 processNewItems(items);
 83                 masNode.append(items);
 84                 
 85                 imagesLoading = true;
 86                 items.imagesLoaded(function(){
 87                     imagesLoading = false;
 88                     items.css(‘opacity‘, 1);
 89                     masNode.masonry({
 90                         itemSelector: ‘.thumbnail‘,
 91                         isFitWidth: true
 92                     });
 93                 });
 94             }
 95             
 96             
 97             function appendToMasonry() {
 98                 var items = getNewItems().css(‘opacity‘, 0);
 99 
100                 processNewItems(items);
101                 masNode.append(items);
102                 
103                 imagesLoading = true;
104                 items.imagesLoaded(function(){
105                     imagesLoading = false;
106                     items.css(‘opacity‘, 1);
107                     masNode.masonry(‘appended‘,  items);
108                 });
109             }
110 
111             function ajaxItem(){
112                 var items = $(‘#masonry_ghost‘).find(‘.thumbnail‘).css(‘opacity‘, 0);
113
116                 processNewItems(items);
117                 masNode.append(items);
118                 imagesLoading = true;
119 
120                 items.imagesLoaded(function(){
121                     
122                     items.css(‘opacity‘, 1);
123                     masNode.masonry(‘appended‘,  items);
124                     imagesLoading = false;
125                 });
126             }
127             
128             
129             initMasonry();
130             var page =2; //分页
131             var ttt=1;
132             $(window).scroll(function() {
133                 if(arguments.callee.timer) clearTimeout(arguments.callee.timer);//解决FIRFOX下滚动多次
134                 if($(document).height() - $(window).height() - $(document).scrollTop() < 30) {
135                     arguments.callee.timer = setTimeout(getdiv,400);
136                 }
137                 
138             });
139 
140             function getdiv(){
141                 if(!imagesLoading) {
142                     $.ajax({
143                         url: ‘{:U("Tulebu/getsharedata")}‘,
144                         type: ‘POST‘,
145                         dataType: ‘text‘,
146                         data: {‘page‘: page},
147                         async:false,
148                     })
149                     .done(function(data) {
150                         if(data.length<2){
151                             imagesLoading = true;
152                             return;
153                         }
154                         $(‘#masonry_ghost‘).append(data);
155                         page+=1;
156                         ajaxItem();
157                     })
158                     .fail(function() {
159                         console.log("error");
160                     })
161                     .always(function() {
162                         console.log("complete");
163                     });
164                 }
165             }
166             
167             
168             
169             function randomColor() {
170                 var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16);
171                 for (; rand.length < 6;) {
172                     rand = ‘0‘ + rand;
173                 }
174                 return ‘#‘ + rand;
175             }
176 
177             // var page=0;
178             // function getdata(){
179             //     $.$.post(‘{:U(‘Julebu/‘)}‘, param1: ‘value1‘, function(data, textStatus, xhr) {
180             //         /*optional stuff to do after success */
181             //     });
182             // }
183             
184             
185         });
186     </script>
187 </block>