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>