经典瀑布流布局

最近公司写的项目用到了瀑布流布局，虽然以前也一直用过但是没有好好整理 ~

　　大家肯定都不想只做一个搬砖的瓦匠对吧，所以我们写代码不要只仅仅是写出来，自己要考虑其中的逻辑，一步一步按照思路来。

废话不多说，直接撸代码。

　　然后你就会发现，其实看起来那么繁杂的一个个程序，不过也就是扮猪吃老虎，就这么点事。

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

.itemBox {

　　width: 1050px;

　　margin: 0 auto;

　　position: relative;

}

.item {

　　border: 1px solid #ccc;

　　padding: 4px;

　　position: absolute;

}

</style>

</head>

<body>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

　　</div>

</body>

window.onload = function () {

　　思路分析

　　　　1 获取到.itemBox 宽度

　　　　2 获取到.item 宽度

　　　　3 求出列数

　　　4 求出间距

　　　　5 实现瀑布流布局的方法

　　　　6 滚动页面时加载数据

// 获取到相关元素

　　var itemBox = document.getElementsByClassName('itemBox')[0];

　　var items = document.getElementsByClassName('item');

// 1 获取到.itemBox 宽度

　　var itemBoxW = itemBox.offsetWidth;

// 2 获取到.item 宽度

　　var itemW = items[0].offsetWidth;

// 3 求出列数

　　var column = parseInt(itemBoxW / itemW);

// 4 求出间距

　　var distence = (itemBoxW - itemW * column) / (column - 1);

// 5 实现瀑布流布局的方法

// 定义一个存储每列高度的容器

　　var arr = [];

　　waterFull();

// 6 滚动页面时加载数据

　　window.onscroll = function () {

　　　　if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {

　　　　// 这里模拟后台返回数据

　　　　　　var json = [

　　　　　　　　{ "src": "./images/P_000.jpg" },

　　　　　　　　{ "src": "./images/P_001.jpg" },

　　　　　　　　{ "src": "./images/P_002.jpg" },

　　　　　　　　{ "src": "./images/P_003.jpg" },

　　　　　　　　{ "src": "./images/P_004.jpg" },

　　　　　　　　{ "src": "./images/P_005.jpg" },

　　　　　　　　{ "src": "./images/P_006.jpg" },

　　　　　　　　{ "src": "./images/P_007.jpg" },

　　　　　　　　{ "src": "./images/P_008.jpg" },

　　　　　　　　{ "src": "./images/P_009.jpg" },

　　　　　　　　{ "src": "./images/P_010.jpg" }

　　　　　　　];

　　　　for (var i = 0; i < json.length; i++) {

　　　　　　var div = document.createElement('div');

　　　　　　div.className = 'item';

　　　　　　var img = document.createElement('img');;

　　　　　　img.src = json[i].src;

　　　　　　div.appendChild(img);

　　　　　　itemBox.appendChild(div);

　　　　}

　　　　waterFull();

　　}

// 实现瀑布流布局的方法

　　function waterFull() {

　　　　for (var i = 0; i < items.length; i++) {

　　　　　　if (i < column) {

　　　　　　　　items[i].style.left = (itemW + distence) * i + 'px';

　　　　　　　　arr[i] = items[i].offsetHeight;

　　　　　　} else {

　　　　　　　　var minV = getMin(arr).minV;

　　　　　　　　var minI = getMin(arr).minI;

　　　　　　　　items[i].style.left = (itemW + distence) * minI + 'px';

　　　　　　　　items[i].style.top = minV + distence + 'px';

　　　　　　　　arr[minI] = minV + distence + items[i].offsetHeight;

　　　　　　}

// 获取数组的最小值以及索引

　　function getMin(arr) {

　　　　var obj = {};

　　　　obj.minV = arr[0];

　　　　obj.minI = 0;

　　　　for (var i = 1; i < arr.length; i++) {

　　　　　　if (obj.minV > arr[i]) {

　　　　　　obj.minV = arr[i];

　　　　　　obj.minI = i;

　　　　}

　　　　return obj;

　　}

</script>

</html>

看看，是不是就这么点事

猜你喜欢