<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
float: left;
border: 1px solid #ccc;
padding: 5px;
}
</style>
<script>
//第一行图片不用计算 自然摆放即可
//后面的要通过JS去摆放
//找到高度最短的这一列去追加
window.onload=function(){
//计算列数
var container=document.getElementById("container");
var boxes=container.children;
var pageWidth=window.innerWidth;
var boxWidth=boxes[0].offsetWidth;
var column=Math.floor(pageWidth/boxWidth);
console.log(column);
//找最小列
var arrHeight=[];
function waterfall(){
for (var i=0;i<boxes.length;i++){
if (i<column){
arrHeight[i]=boxes[i].offsetHeight;
}else {
var minHeight=getMin(arrHeight).value;
var minHeightIndex=getMin(arrHeight).index;
boxes[i].style.position="absolute";
boxes[i].style.left=boxes[minHeightIndex].offsetLeft+"px";
boxes[i].style.top=minHeight+"px";
arrHeight[minHeightIndex]=minHeight+boxes[i].offsetHeight;
}
}
}
waterfall();
var minHeight=getMin(arrHeight).value;
var minHeightIndex=getMin(arrHeight).index;
console.log(arrHeight);
console.log(minHeight);
console.log(minHeightIndex);
//判断触底
window.onscroll=function(){
if (bottomed()){
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"}
]
for(var i=0;i<json.length;i++){
var div=document.createElement("div");
div.className="box";
container.appendChild(div);
var img=document.createElement("img");
img.src=json[i].src;
div.appendChild(img);
}
waterfall();
}
}
function bottomed(){
var clientHeight=window.innerHeight;
var scrollTop=window.pageYOffset;
var lastBoxTop=boxes[boxes.length-1].offsetTop;
if (clientHeight+scrollTop>lastBoxTop){
return true;
}
}
}
function getMin(arr){
var min={};
min.index=0;
min.value=arr[min.index];
for (var i=0;i<arr.length;i++){
if (arr[i]<min.value){
min.value=arr[i];
min.index=i;
}
}
return min;
}
</script>
</head>
<body>
<div id="container">
<!--(.box>img[src="images/P_00$.jpg"])*9-->
<div class="box"><img src="images/P_000.jpg" alt=""/></div>
<div class="box"><img src="images/P_001.jpg" alt=""/></div>
<div class="box"><img src="images/P_002.jpg" alt=""/></div>
<div class="box"><img src="images/P_003.jpg" alt=""/></div>
<div class="box"><img src="images/P_004.jpg" alt=""/></div>
<div class="box"><img src="images/P_005.jpg" alt=""/></div>
<div class="box"><img src="images/P_006.jpg" alt=""/></div>
<div class="box"><img src="images/P_007.jpg" alt=""/></div>
<div class="box"><img src="images/P_008.jpg" alt=""/></div>
<div class="box"><img src="images/P_009.jpg" alt=""/></div>
<div class="box"><img src="images/P_010.jpg" alt=""/></div>
<div class="box"><img src="images/P_011.jpg" alt=""/></div>
<div class="box"><img src="images/P_012.jpg" alt=""/></div>
<div class="box"><img src="images/P_013.jpg" alt=""/></div>
<div class="box"><img src="images/P_014.jpg" alt=""/></div>
<div class="box"><img src="images/P_015.jpg" alt=""/></div>
<div class="box"><img src="images/P_016.jpg" alt=""/></div>
<div class="box"><img src="images/P_017.jpg" alt=""/></div>
<div class="box"><img src="images/P_018.jpg" alt=""/></div>
<div class="box"><img src="images/P_019.jpg" alt=""/></div>
<div class="box"><img src="images/P_000.jpg" alt=""/></div>
<div class="box"><img src="images/P_001.jpg" alt=""/></div>
<div class="box"><img src="images/P_002.jpg" alt=""/></div>
<div class="box"><img src="images/P_003.jpg" alt=""/></div>
<div class="box"><img src="images/P_004.jpg" alt=""/></div>
<div class="box"><img src="images/P_005.jpg" alt=""/></div>
<div class="box"><img src="images/P_006.jpg" alt=""/></div>
<div class="box"><img src="images/P_007.jpg" alt=""/></div>
<div class="box"><img src="images/P_008.jpg" alt=""/></div>
<div class="box"><img src="images/P_009.jpg" alt=""/></div>
<div class="box"><img src="images/P_010.jpg" alt=""/></div>
<div class="box"><img src="images/P_011.jpg" alt=""/></div>
<div class="box"><img src="images/P_012.jpg" alt=""/></div>
<div class="box"><img src="images/P_013.jpg" alt=""/></div>
<div class="box"><img src="images/P_014.jpg" alt=""/></div>
<div class="box"><img src="images/P_015.jpg" alt=""/></div>
<div class="box"><img src="images/P_016.jpg" alt=""/></div>
<div class="box"><img src="images/P_017.jpg" alt=""/></div>
<div class="box"><img src="images/P_018.jpg" alt=""/></div>
<div class="box"><img src="images/P_019.jpg" alt=""/></div>
</div>
<!--<script>
//入口函数
/*window.onload=function(){
var container=document.getElementById("container");
var boxes=container.children;
var pageWidth=window.innerWidth;
var boxWidth=boxes[0].offsetWidth;
var column=Math.floor(pageWidth/boxWidth);
console.log(column);
}*/
//获取最小值
/*function getMin(arr){
var min={};
min.index=0;
min.value=arr[min.index];
for (var i=0;i<arr.length;i++){
if (arr[i]<min.value){
min.value=arr[i];
min.index=i;
}
}
return min;
}*/
/* var arr=[1,2,3,4,5];
console.log(getMin(arr).value);
console.log(getMin(arr).index);*/
</script>-->
</body>
</html>