原生JS瀑布流布局赏析

本效果的思想来源于以下这边文章：

http://www.w3cfuns.com/thread-5592024-1-1.html

瀑布流布局主要分为两部分：

1) 数据块排列，算法步骤简述下:

初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度； b，列宽度； 最终列数取的是容器宽度/列宽度；

获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；

依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束。

源码如下：

arrange: function(obj) {
            var columnWidth = options.columnWidth;
            var columnSpace = options.columnSpace;
            var iList = X.getByClass(options.itemSelector, obj);
            var imgList = X.getByTag('img', obj);
            this.imageUpload(imgList, function() {
                for(var i = 0; i < iList.length; i++) {
                    var item = iList[i];
                    var minIndex = hList.min();
                    var top = parseFloat(hList[minIndex]) + columnSpace;
                    item.style.position = 'absolute';
                    item.style.left = minIndex*(columnWidth+columnSpace) + columnSpace +'px';
                    item.style.top = top +'px';
                    hList[minIndex] = top + item.offsetHeight;
                }
                options.complete && options.complete(obj);
                _this.loading = false;
            });
        }

2) 异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，仅包含两个步骤:

绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；

加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。

源码如下：

scrollHandler: function(e) {
            if(_this.loading) {
                return;
            }
            var flag = hList[hList.min()] < (doc.documentElement.scrollTop || doc.body.scrollTop) + doc.documentElement.clientHeight;
            if(flag) {
                _this.loading = true;
                options.load(function(obj) {
                    _this.arrange(obj);
                }, function(e) {
                    X.delEvent(win, 'scroll', _this.scrollHandler);
                });
            }
        }

demo演示效果地址：http://xiechengxiong.com/221.html

       欢迎光临我的前端博客： http://xiechengxiong.com/