html方面:搭建简单框架
<h1>waterFull</h1>
<div class="cont">
<div class="item"><img src="./img/img_001.jpg" alt=""></div>
<div class="item"><img src="./img/img_002.jpg" alt=""></div>
<div class="item"><img src="./img/img_003.jpg" alt=""></div>
<div class="item"><img src="./img/img_004.jpg" alt=""></div>
<div class="item"><img src="./img/img_005.jpg" alt=""></div>
<div class="item"><img src="./img/img_006.jpg" alt=""></div>
<div class="item"><img src="./img/img_007.jpg" alt=""></div>
<div class="item"><img src="./img/img_008.jpg" alt=""></div>
<div class="item"><img src="./img/img_009.jpg" alt=""></div>
<div class="item"><img src="./img/img_010.jpg" alt=""></div>
<div class="item"><img src="./img/img_011.jpg" alt=""></div>
<div class="item"><img src="./img/img_012.jpg" alt=""></div>
<div class="item"><img src="./img/img_013.jpg" alt=""></div>
</div>
css注意点:使用定位时子绝父相
<style>
* {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
line-height: 80px;
}
.cont {
width: 80%;
position: relative;
margin: 0 auto;
}
.cont .item {
position: absolute;
border: 1px solid #cccccc;
padding: 10px;
}
.item img {
/*width: 160px;*/
border: 1px solid lavender;
}
</style>
js思路
1 获取元素 容器宽度、图片盒子宽度
2 求出列数、间距
3 调用瀑布流实现布局
4 滚动加载数据
<script>
//等所有dom完成后执行
window.onload = function () {
//1 获取元素 容器宽度、图片盒子宽度
//2 求出列数、间距
//3 调用瀑布流实现布局
//4 滚动加载数据
//1 获取元素 容器宽度、图片盒子宽度
var cont = document.getElementsByClassName("cont")[0];
var items = document.getElementsByClassName("item");
var contW = cont.offsetWidth;
var itemW = items[0].offsetWidth;
//2 求出列数、间距
var cols = parseInt(contW/itemW);
var dist = (contW-itemW*cols)/(cols-1);
//3 调用瀑布流实现布局
//定义一个数组存放每列图片的高度,寻找最小值及对应的索引值
var arrH = [];
waterFull();
//4 滚动加载数据
window.onscroll = function () {
if ( btmLoad()){
// console.log(1);
var json = [
{"src":"./img/img_001.jpg"},
{"src":"./img/img_002.jpg"},
{"src":"./img/img_003.jpg"},
{"src":"./img/img_004.jpg"},
{"src":"./img/img_005.jpg"},
{"src":"./img/img_006.jpg"},
{"src":"./img/img_007.jpg"},
{"src":"./img/img_008.jpg"},
{"src":"./img/img_013.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);
cont.appendChild(div);
}
waterFull();
}
}
//滚动加载时机
function btmLoad() {
//屏幕高度
var screenH = window.innerHeight;
//被卷曲高度
var contTop = window.pageYOffset;
//最小值高度
var minH = getMin(arrH).value;
if (screenH + contTop > minH) {
return true;
}
}
//方法:实现瀑布流
function waterFull() {
for (var i = 0; i < items.length; i++) {
if (i < cols) { //第一行实现方法
items[i].style.left = (itemW + dist) * i + "px";
arrH[i] = items[i].offsetHeight;
}else { //从第二行第一个开始:放在第一行高度最小的后面
//每行图片中的高度最小值及对应的索引
var minHeight = getMin(arrH).value;
var minIndex = getMin(arrH).index;
items[i].style.left = (itemW + dist) * minIndex + "px";
items[i].style.top = minHeight + 10 + "px";
arrH[minIndex] = minHeight + 10 + items[i].offsetHeight;
}
}
}
//方法:求出每行中的高度最小值寄对应的索引值
function getMin(arr) {
var obj = {};
obj.value = arr[0];
obj.index = 0;
for (var i = 1; i < arr.length; i++) {
if (obj.value > arr[i]) {
obj.value = arr[i];
obj.index = i;
}
}
return obj;
}
}
</script>