css修饰代码:
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#wrap{
position: relative;
}
#wrap div{
position: absolute;
border: 1px solid #CECECE;
}
img{
display: block;
border:none;
}
</style>
html结构代码
<div id="wrap">
<div><img src="img2/1.jpg"></div>
<div><img src="img2/2.jpg"></div>
<div><img src="img2/3.jpg"></div>
<div><img src="img2/4.jpg"></div>
<div><img src="img2/5.jpg"></div>
<div><img src="img2/6.jpg"></div>
<div><img src="img2/7.jpg"></div>
<div><img src="img2/8.jpg"></div>
<div><img src="img2/9.jpg"></div>
<div><img src="img2/2.jpg"></div>
<div><img src="img2/3.jpg"></div>
<div><img src="img2/4.jpg"></div>
<div><img src="img2/5.jpg"></div>
<div><img src="img2/6.jpg"></div>
<div><img src="img2/7.jpg"></div>
</div>
js实现代码:
<script type="text/javascript">
var data = ["img2/1.jpg","img2/3.jpg","img2/5.jpg"];
window.onload = window.onresize = function(){
var oWrap = document.getElementById("wrap");
var aItems = oWrap.children;
//取总宽度
var totalWidth = oWrap.offsetWidth;
//单个区块宽度
var perWidth = aItems[0].offsetWidth;
//一行的列数
var cols = Math.floor(totalWidth/perWidth);
//区块的间距
var mt = ml = 10;
//排第一行区块的位置
//保存每一列高度的数组
var arrHei = [];
for(var i = 0; i < cols; i++){
aItems[i].style.top = 0;
aItems[i].style.left = (perWidth+ml)*i + "px";
arrHei.push(aItems[i].offsetHeight);
}
//排剩余的区块
conPos(cols);
function conPos(startNum){
for(var i = startNum; i < aItems.length; i++){
aItems[i].style.left = aItems[getMinIndex(arrHei)].style.left;
aItems[i].style.top = arrHei[getMinIndex(arrHei)] + mt + "px";
//拍完一个之后,更新数组
arrHei[getMinIndex(arrHei)] += aItems[i].offsetHeight + mt;
}
}
//定义一个取最小值索引的方法
function getMinIndex(arr){
var minVal = Math.min.apply(null,arr);
var minIndex = arr.indexOf(minVal);
return minIndex;
}
//实现资源持续加载
var ch = document.documentElement.clientHeight;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(arrHei[getMinIndex(arrHei)]<ch+scrollTop){
var str = "";
data.forEach(function(item){
str += `<div><img src="${item}"></div>`;
})
oWrap.innerHTML += str;
//对新插入的数据排序
conPos(aItems.length-data.length);
}
}
}
</script>