实现一个瀑布流
2019-01-29 本文已影响0人
超级关
什么是瀑布流
瀑布流,是一种比较流行的网页布局,顾名思义是类似瀑布一样,参差不齐的多栏布局。随着页面的向下滚动,网页会呈现类似于瀑布的效果。
我们通常在国内一些网站,例如美丽说、知美、花瓣网等都能看到瀑布流的应用。主要是用做罗列美食、产品等给人以更优美、更直观的感受。
瀑布流的优缺点
优点
- 有效的降低了界面复杂度,节省了空间
- 瀑布流向下划动时,给予移动端的用户更好的体验
缺点
- 用户向下划动时,会无限翻页,很难划到底部
- 当用户想要返回之前看的图片时,需要找很久
瀑布流的原理
瀑布流的元素是等宽从上到下依次排列的,需要给元素设定绝对定位,通过调节top
和left
的来改变元素的位置。定义一个空数组,数组内元素的个数就是瀑布流的列数,元素的值就是高度。将数组内的每个元素的初始值都设为0,然后向里面去放置图片,增加高度。由于图片是放置在所有列中最低的一列下的,因此需要做判断。当高度最小时,放置图片,增加当前列的高度,以此类推。
简单实现一个瀑布流
那下面我们来动手用jQuery
来实现一个瀑布流布局
首先,我们可以通过 https://via.placeholder.com 这个网站来生成一个随机图片,给网址加上后缀来规定图片的大小。创建若干不同大小的img
, 看上去参差不齐,用 div
包裹
<div class="waterfall">
<img src="https://via.placeholder.com/100x100">
<img src="https://via.placeholder.com/100x160">
<img src="https://via.placeholder.com/100x90">
<img src="https://via.placeholder.com/100x150">
<img src="https://via.placeholder.com/100x190">
<img src="https://via.placeholder.com/100x120">
<img src="https://via.placeholder.com/100x130">
<img src="https://via.placeholder.com/100x120">
<img src="https://via.placeholder.com/100x80">
<img src="https://via.placeholder.com/100x120">
<img src="https://via.placeholder.com/100x130">
<img src="https://via.placeholder.com/100x150">
<img src="https://via.placeholder.com/100x140">
<img src="https://via.placeholder.com/100x200">
<img src="https://via.placeholder.com/100x180">
<img src="https://via.placeholder.com/100x150">
<img src="https://via.placeholder.com/100x120">
<img src="https://via.placeholder.com/100x120">
<img src="https://via.placeholder.com/100x70">
<img src="https://via.placeholder.com/100x110">
</div>
接着,给每个 img
都设定绝对定位,是为了接下来通过调节img
的位置top
和left
来改变其在页面中的位置。简单设定一下css
的样式
.waterfall {
width: 600px;
margin: 0 auto;
position: relative;
}
.waterfall img {
position: absolute;
width: 100px;
padding: 10px;
}
轮到 jQuery
的部分了
声明变量:列数、新数组和图片的宽度
var colCount
var colHeightArray = []
var imgWidth = $('.waterfall img').outerWidth(true)
colCount = Math.floor($('.waterfall').width() / imgWidth)
循环数组,给数组的每一项都设定初始值为0
for (var i = 0; i < colCount; i++) {
colHeightArray[i] = 0
}
给图片加一个绑定事件,当加载图片时,进入for
循环判断。如果当前元素的高度小于最小高度,那么把当前元素的高度赋值为最小高度。再对css
进行操作,设定相应的top
和left
。图片放置后,增加对应列高度,继续进行之后的判断。
$('.waterfall img').on('load', function () {
var minValue = colHeightArray[0]
var minIndex = 0
for (var i = 0; i < colCount; i++) {
if (colHeightArray[i] < minValue) {
minValue = colHeightArray[I]
minIndex = I
}
}
$(this).css({
left: minIndex * imgWidth,
top: minValue
})
colHeightArray[minIndex] += $(this).outerHeight(true)
})
最后得到如下的效果
waterfall.png