关于瀑布流

前面文章《vuejs实现瀑布流布局（一）》和《vuejs实现瀑布流布局（二）》已经介绍了瀑布流的基本实现的一种方法，虽然是在vuejs中实现的，可是实际上也可以把这段代码扒出来，在我们的任何项目中使用，并不局限于vuejs。

我也在项目中用这段代码实现了这种瀑布流。

后来发现一个问题，就是瀑布流布局会在每次刷新之后，排序发生变化，如果讲究一点的话，其实并没有什么特别大的影响，可是如果追求精益求精的话，确实不太理想。

看一下，瀑布流实现的关键性代码：

$("#items").children("li").each(function (index, val) {
    var $this = $(this);
    var $img = $this.find("img").first();
    $img.on("error", function () {
        $img.attr("src", "../src/assets/images/default.png");
    });

    if ($img.get(0).complete) {
        addItems();
    } else {
        $img.on("load", function () {
            addItems();
        });
    }

    function addItems() {
        if(_this.leftHeight <= _this.rightHeight){
            $l.append($this);
            _this.leftHeight = $l.height();
        }else{
            $r.append($this);
            _this.rightHeight = $r.height();
        }
    }    
    $.refreshScroller();
});

　　其中的addItems就是布局瀑布流的，但是当前存在的问题就是：当从后台取回数据之后，在id="items"的ul中渲染每一项列表时，一旦图片加载完成，就立马将其布局到页面中，这就必然导致每次刷新之后页面布局排序的顺序有所不同，因为我们没有办法预计哪条数据中的图片加载先完成。

如此，如果需要修复这个问题的话，似乎只有一个可提供的方案，等待所有图片在<ul id="items"></ul>中加载完成，然后在按顺序布局到页面中。

定义一个全局变量：

imgs: {
    imgLoad: [],
    loadNums: 0
}

　　在数据请求回来之后，把新请求回来的数据赋值给imgs.imgLoad，以保证imgs.imgLoad里面所存储的数据都是刚刚请求回来的数据，然后在<ul id="items"></ul>渲染之前，将imgs.loadNums = 0;重新赋值为0，然后<ul id="items"></ul>的列表li每次渲染加载img成功之后imgs.loadNums++，当imgs.loadNums值等于imgs.imgLoad的数组长度的时候，再开始页面布局。

$("#items").children("li").each(function (index, item) {
            var $this = $(item);
            var _img = $(item).find("img").first();
            _img.on("error", function () {
              _img.attr("src", "../src/assets/images/default.png");
            });
            
            _this.leftHeight = $l.height();
            _this.rightHeight = $r.height();
            if(_img.get(0).complete){
              _this.imgs.loadNums++
            } else {
              _img.on("load", function () {
                _this.imgs.loadNums++
                waterfallLayer();
              })
            }
          })

          waterfallLayer()
          function waterfallLayer() {
            if (_this.imgs.loadNums == _this.imgs.imgLoad.length) {
              $("#items").children("li").each(function (index, item) {
                if(_this.leftHeight <= _this.rightHeight){
                  $l.append($(item));
                  _this.leftHeight = $l.height();
                }else{
                  $r.append($(item));
                  _this.rightHeight = $r.height();
                }
              })
            }
          }

　　就此保证了，不管怎么刷新页面，数据排序都是一致的。