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 += ' (' + 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>