实现一个瀑布流

什么是瀑布流

瀑布流，是一种比较流行的网页布局，顾名思义是类似瀑布一样，参差不齐的多栏布局。随着页面的向下滚动，网页会呈现类似于瀑布的效果。
我们通常在国内一些网站，例如美丽说、知美、花瓣网等都能看到瀑布流的应用。主要是用做罗列美食、产品等给人以更优美、更直观的感受。

瀑布流.png

瀑布流的优缺点

优点

有效的降低了界面复杂度，节省了空间
瀑布流向下划动时，给予移动端的用户更好的体验

缺点

用户向下划动时，会无限翻页，很难划到底部
当用户想要返回之前看的图片时，需要找很久

瀑布流的原理

瀑布流的元素是等宽从上到下依次排列的，需要给元素设定绝对定位，通过调节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

最后编辑于：2019.01.29 22:17:56