JS瀑布流的实现
实现思路:
1.首先根据视口的宽度除以元素宽度加间距的宽度,向下取整,获取一行所占列数
2.获取所有子元素数据,循环遍历,当循环索引小于子元素索引,说明处于第一行,否则位于后几行
3.第一行设置绝对定位,设置上、左偏移量,上偏移量0,左偏移量根据索引和元素宽度进行设置,并将元素的offsetHeight存入元素列高度的数组
4.其余行,将后续元素依次放到列高度最小的位置。获取到元素列高度数组中最小的索引,根据列高度和列偏移量分别设置当前元素的上、左偏移量,将当前列高度更新
5.当视口宽度改变时,重新设置列,排列元素位置
6.当容器底部的位置小于或等于视口高度加上滚动距离,说明触底,加载更多的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流示例</title>
<style>
* {
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 250px;
}
.item {
box-shadow: 2px 2px 2px #999;
position: absolute;
}
</style>
<script>
window.onload = function () {
var box = document.getElementById('box');
var items = box.children;
var gap = 10;
var img_width = 250;
function waterfall() {
var pageWidth = document.documentEle