阅读 256

瀑布流原理以及实现

瀑布流在多个网站都可以看到,例如百度图片,pinterest,看起来很好看,实现起来也很简单。在先前我其实想用插件的,但是插件一时爽,全家火葬场。需要依赖的东西太多了,网上有waterfall,masonry这些插件,看了waterfall的源码,需要依赖handlebars,还有jQuery。在公司项目中移动端使用的是zepto,那又需要引用jquery,handlebars感觉就特别蠢,所以干脆自己动手实现一个瀑布流。

原理

瀑布流是要求布置的元素等宽,然后在计算元素的宽度和浏览器宽度的比值,得到需要布置的列数 创建一个数组,数组的长度为布置的列数,初始化的时候数组内的元素都为0 把父元素定位设置为position: relative,计算每个元素应该摆放的位置。

具体实现

下面是html结构:

<div class="grid">
  <div>
    <div class='grid-item'>
    </div>
    <div class='grid-item'>
    </div>
  </div>
</div>
<style>
  .grid {
    position: relative;
  }
  .grid-item {
    position: absolute;
  }
</style>
复制代码

首先计算行数

  var widthNum = parseInt($(window).width()/$(".grid-item").width()),
    allHeight = [];
    for (var i = 0; i < width; i++) {
      allHeight.push(0);
    }
    function refresh () {
      allHeight = $(new Array(widthNum)).map(function () {
        return 0;
      })
      $('grid-item').each(function () {
        var _this = $(this),
          index = 0,
          minAllHeight = allHeight[0];
        for(var j = 0; j < allHeight.length; j++) {
          if (allHeight[j] < minAllHeight) {
            minAllHeight = allHeight[j];
            index = j;
          }
        }
        _this.css({
          "left": index * _this.width(),
          "top": minAllHeight
        });
        allHeight[index] = minAllHeight + _this.height();
      })
    }
复制代码

排版的核心程序就在于此,refresh在于每次更改数据的时候,我们都需要重新排版,例如一个元素的大小发生变化,添加元素,或者删除元素,我们都需要重新调用refresh()方法。好像就是这么简单,具体的自己可以去讨论,例如去请求数据后,加一个loading动画之类的。

关注下面的标签,发现更多相似文章
评论