前端开发

实现一个瀑布流

2019-01-29  本文已影响0人  超级关

什么是瀑布流

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

瀑布流.png

瀑布流的优缺点

优点

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

缺点

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

瀑布流的原理

瀑布流的元素是等宽从上到下依次排列的,需要给元素设定绝对定位,通过调节topleft的来改变元素的位置。定义一个空数组,数组内元素的个数就是瀑布流的列数,元素的值就是高度。将数组内的每个元素的初始值都设为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 的位置topleft来改变其在页面中的位置。简单设定一下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进行操作,设定相应的topleft。图片放置后,增加对应列高度,继续进行之后的判断。

$('.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
上一篇下一篇

猜你喜欢

热点阅读