三种方式实现瀑布流布局

最新推荐文章于 2024-06-03 23:35:38 发布

枫奇

最新推荐文章于 2024-06-03 23:35:38 发布

阅读量5.3k

点赞数 2

分类专栏：前端

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

分别使用javascript，jquery，css实现瀑布流布局：

第一种方式：使用JavaScript：

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>瀑布流布局</title>
6 <style>
7 *{padding:0;margin:0;}
8 .clearfix:after,
9 .clearfix:before {
10 content: " ";
11 display: table;
12 }
13 .clearfix:after {
14 clear: both;
15 }
16 .main {
17 position: relative;
18 -webkit-column-width: 210px;
19 -moz-column-width: 210px;
20 -webkit-column-gap: 5px;
21 -moz-column-gap: 5px;
22 }
23 .box {
24 float: left;
25 padding: 15px 0 0 15px;
26 }
27 .box .pic {
28 width: 180px;
29 height: auto;
30 padding: 10px;
31 border-radius: 5px;
32 box-shadow: 0 0 5px #cccccc;
33 border: 1px solid #cccccc;
34 }
35 .box .pic img {
36 display: block;
37 width: 100%;
38 }
39
40
41 </style>
42 </head>
43 <body>
44 <div class="main clearfix" id="main">
45 <div class="box">
46 <div class="pic"><img src="./images/0.jpg"></div>
47 </div>
48 <div class="box">
49 <div class="pic"><img src="./images/1.jpg"></div>
50 </div>
51 <div class="box">
52 <div class="pic"><img src="./images/2.jpg"></div>
53 </div>
54 <div class="box">
55 <div class="pic"><img src="./images/3.jpg"></div>
56 </div>
57 <div class="box">
58 <div class="pic"><img src="./images/4.jpg"></div>
59 </div>
60 <div class="box">
61 <div class="pic"><img src="./images/5.jpg"></div>
62 </div>
63 <div class="box">
64 <div class="pic"><img src="./images/6.jpg"></div>
65 </div>
66 <div class="box">
67 <div class="pic"><img src="./images/7.jpg"></div>
68 </div>
69 <div class="box">
70 <div class="pic"><img src="./images/8.jpg"></div>
71 </div>
72 <div class="box">
73 <div class="pic"><img src="./images/9.jpg"></div>
74 </div>
75 <div class="box">
76 <div class="pic"><img src="./images/10.jpg"></div>
77 </div>
78 <div class="box">
79 <div class="pic"><img src="./images/11.jpg"></div>
80 </div>
81 <div class="box">
82 <div class="pic"><img src="./images/12.jpg"></div>
83 </div>
84 <div class="box">
85 <div class="pic"><img src="./images/13.jpg"></div>
86 </div>
87 <div class="box">
88 <div class="pic"><img src="./images/14.jpg"></div>
89 </div>
90 <div class="box">
91 <div class="pic"><img src="./images/15.jpg"></div>
92 </div>
93 <div class="box">
94 <div class="pic"><img src="./images/16.jpg"></div>
95 </div>
96 <div class="box">
97 <div class="pic"><img src="./images/17.jpg"></div>
98 </div>
99 <div class="box">
100 <div class="pic"><img src="./images/18.jpg"></div>
101 </div>
102 <div class="box">
103 <div class="pic"><img src="./images/19.jpg"></div>
104 </div>
105 <div class="box">
106 <div class="pic"><img src="./images/20.jpg"></div>
107 </div>
108 <div class="box">
109 <div class="pic"><img src="./images/21.jpg"></div>
110 </div>
111 <div class="box">
112 <div class="pic"><img src="./images/22.jpg"></div>
113 </div>
114 <div class="box">
115 <div class="pic"><img src="./images/23.jpg"></div>
116 </div>
117 <div class="box">
118 <div class="pic"><img src="./images/24.jpg"></div>
119 </div>
120 <div class="box">
121 <div class="pic"><img src="./images/25.jpg"></div>
122 </div>
123 <div class="box">
124 <div class="pic"><img src="./images/26.jpg"></div>
125 </div>
126 <div class="box">
127 <div class="pic"><img src="./images/27.jpg"></div>
128 </div>
129 <div class="box">
130 <div class="pic"><img src="./images/28.jpg"></div>
131 </div>
132 <div class="box">
133 <div class="pic"><img src="./images/29.jpg"></div>
134 </div>
135 <div class="box">
136 <div class="pic"><img src="./images/25.jpg"></div>
137 </div>
138 <div class="box">
139 <div class="pic"><img src="./images/26.jpg"></div>
140 </div>
141 <div class="box">
142 <div class="pic"><img src="./images/27.jpg"></div>
143 </div>
144 <div class="box">
145 <div class="pic"><img src="./images/28.jpg"></div>
146 </div>
147 <div class="box">
148 <div class="pic"><img src="./images/29.jpg"></div>
149 </div>
150 </div>
151 <script>
152 window.onload = function(){
153 waterfall('main','box');
154
155
156 //模拟json数据
157 var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};
158
159
160 //监听scroll事件
161 window.onscroll = function(){
162 var isPosting = false;
163 if(checkScollSlide('main','box') && !isPosting){
164 var oParent = document.getElementById('main');
165 for(var i in dataJson.data){
166 isPosting = true;
167 var oBox = document.createElement('div');
168 oBox.className = 'box';
169 oBox.innerHTML = '<div class="pic"><img src="./images/'+dataJson.data[i].src+'"></div>';
170 oParent.appendChild(oBox);
171 }
172 isPosting = false;
173 waterfall('main','box');
174 }
175 }
176
177
178 }
179
180
181 /*
182 * parent 父元素id clsName 块元素类*/
183 function waterfall(parent,clsName){
184 //获取父元素
185 var oParent = document.getElementById(parent),
186 //获取所有box
187 aBoxArr = oParent.getElementsByClassName(clsName),
188 //单个box宽度
189 iBoxW = aBoxArr[0].offsetWidth,
190 // 列数
191 cols = Math.floor(document.documentElement.clientWidth / iBoxW);
192
193
194 oParent.style.cssText = 'width:'+iBoxW*cols+'px;margin:0 auto;';
195
196
197 //储存所有的高度
198 var hArr = [];
199 for(var i = 0; i < aBoxArr.length; i++){
200 if(i < cols){
201 hArr[i] = aBoxArr[i].offsetHeight;
202 }else{
203 //获取hArr最小值
204 var minH = Math.min.apply(null,hArr),
205 // hArr最小值索引index
206 minHIndex = getMinHIndex(hArr,minH);
207 aBoxArr[i].style.cssText = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';
208
209
210 //添加元素之后更新hArr
211 hArr[minHIndex] += aBoxArr[i].offsetHeight;
212 }
213 }
214 }
215
216
217 //获取最小值索引
218 function getMinHIndex(arr,val){
219 for(var i in arr){
220 if(arr[i] == val){
221 return i;
222 }
223 }
224 }
225
226
227 //检查是否满足加载数据条件,parent 父元素id clsName 块元素类
228 function checkScollSlide(parent,clsName){
229 var oParent = document.getElementById(parent),
230 aBoxArr = oParent.getElementsByClassName(clsName),
231 // 最后一个box元素的offsetTop+高度的一半
232 lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2,
233 //兼容js标准模式和混杂模式
234 scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
235 height = document.documentElement.clientHeight || document.body.clientHeight;
236 return lastBoxH < scrollTop + height ? true : false;
237 }
238
239
240 </script>
241
242 </body>
243 </html>

第二种方式：使用jquery：(html结构跟css同上)

$( window ).on( "load", function(){
waterfall('main','box');

//模拟数据json
var dataJson = {'data': [{'src':'30.jpg'},{'src':'31.jpg'},{'src':'32.jpg'},{'src':'33.jpg'},{'src':'34.jpg'},{'src':'35.jpg'},{'src':'36.jpg'},{'src':'37.jpg'},{'src':'38.jpg'},{'src':'39.jpg'},{'src':'40.jpg'},{'src':'41.jpg'},{'src':'42.jpg'},{'src':'43.jpg'},{'src':'44.jpg'},{'src':'45.jpg'}]};

window.onscroll=function(){
var isPosting = false;
if(checkscrollside('main','box') && !isPosting){
isPosting = true;
$.each(dataJson.data,function(index,dom){
var $box = $('<div class="box"></div>');
$box.html('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
$('#main').append($box);
waterfall('main','box');
isPosting = false;
});
}
}
});

/*
parend 父级id
clsName 元素class
*/
function waterfall(parent,clsName){
var $parent = $('#'+parent);//父元素
var $boxs = $parent.find('.'+clsName);//所有box元素
var iPinW = $boxs.eq( 0 ).width()+15;// 一个块框box的宽
var cols = Math.floor( $( window ).width() / iPinW );//列数
$parent.width(iPinW * cols).css({'margin': '0 auto'});

var pinHArr=[];//用于存储 每列中的所有块框相加的高度。

$boxs.each( function( index, dom){
if( index < cols ){
pinHArr[ index ] = $(dom).height(); //所有列的高度
}else{
var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
var minHIndex = $.inArray( minH, pinHArr );
$(dom).css({
'position': 'absolute',
'top': minH + 15,
'left': $boxs.eq( minHIndex ).position().left
});
//添加元素后修改pinHArr
pinHArr[ minHIndex ] += $(dom).height() + 15;//更新添加了块框后的列高
}
});
}

//检验是否满足加载数据条件，即触发添加块框函数waterfall()的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
function checkscrollside(parent,clsName){
//最后一个块框
var $lastBox = $('#'+parent).find('.'+clsName).last(),
lastBoxH = $lastBox.offset().top + $lastBox.height()/ 2,
scrollTop = $(window).scrollTop(),
documentH = $(document).height();
return lastBoxH < scrollTop + documentH ? true : false;
}

第三种方式：使用css：(html结构同上)

.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
[color=#ff0000]-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;[/color]
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}

瀑布流实现方式比较：
Javascript原生方式/jquery方式
1、需要计算，列数 = 浏览器窗口宽度/图片宽度，图片定位是根据每一列的高度计算下来图片的位置；
2、图片排序是按照图片计算的位置横向排列，位置是计算出来的，比较规范

Css方式
1、不需要计算，浏览器自动计算，只需设置列宽，性能高；
2、列宽随着浏览器窗口大小进行改变，用户体验不好；
3、图片排序按照垂直顺序排列，打乱图片显示顺序；
4、图片加载还是依靠javascript/jquery实现

转自：http://www.qdfuns.com/notes/27624/397dc45aeb17e2da9e0351a3ae973b64.html

枫奇

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
三种方式实现瀑布流布局

分别使用javascript，jquery，css实现瀑布流布局：第一种方式：使用JavaScript： 1 &lt;!DOCTYPE html&gt;2 &lt;html lang="en"&gt;3 &lt;head&gt;4 &lt;meta charset="UTF-8"&gt;5 &lt;title&gt;瀑布流布局&lt;/title&gt;6
复制链接

扫一扫

专栏目录