本文章来给各位同学介绍一个js 瀑布流布局实现原理，如果你对此有兴趣可以根据此瀑布流布局实现原理来做自己喜欢的瀑布流效果哦。
瀑布流布局主要分为两部分：
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);
});
}
}
|
