Don't talk nonsense, go directly to the code!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall-horizontal</title>
<style>
.container{width: 100%;height: auto;position: relative;}
.clear{clear: both;height: auto;content: "";}
.box{width: 150px;padding: 10px;border:1px solid #C5C3C3;border-radius: 5px;box-shadow: 2px 2px 5px #C8C8C8;margin: 10px;float: left;}
.box img{width: 150px;display: block;}
.box hr{color: #C9C8C8;}
.box span{color: #F57E17;}
</style>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
</head>
<body>
<div class="container clear"></div>
<script>
$(function(){
// mock data
var jsonData = [
{title:'1',text:'Beautiful girl, always looking into the distance at dusk',src:'img/1.jpg'},
{title:'2',text:'Beautiful girl, always looking into the distance at dusk',src:'img/2.jpg'},
{title:'3',text:'Beautiful girl, always looking into the distance at dusk',src:'img/3.jpg'},
{title:'4',text:'Beautiful girl, always looking into the distance at dusk',src:'img/7.jpg'},
{title:'5',text:'Beautiful girl, always looking into the distance at dusk',src:'img/8.jpg'},
{title:'6',text:'Beautiful girl, always looking into the distance at dusk',src:'img/9.jpg'},
{title:'7',text:'Beautiful girl, always looking into the distance at dusk',src:'img/10.jpg'},
{title:'8',text:'Beautiful girl, always looking into the distance at dusk',src:'img/11.jpg'},
{title:'9',text:'Beautiful girl, always looking into the distance at dusk',src:'img/16.jpg'},
{title:'10',text:'Beautiful girl, always looking into the distance at dusk',src:'img/17.jpg'},
{title:'11',text:'Beautiful girl, always looking into the distance at dusk',src:'img/q.jpg'},
{title:'12',text:'Beautiful girl, always looking into the distance at dusk',src:'img/w.jpg'},
{title:'13',text:'Beautiful girl, always looking into the distance at dusk',src:'img/cat_3.jpg'},
{title:'14',text:'Beautiful girl, always looking into the distance at dusk',src:'img/cat_4.jpg'},
{title:'15',text:'Beautiful girl, always looking into the distance at dusk',src:'img/cat_5.jpg'},
{title:'16',text:'Beautiful girl, always looking into the distance at dusk',src:'img/e.jpg'},
{title:'17',text:'Beautiful girl, always looking into the distance at dusk',src:'img/r.jpg'},
{title:'18',text:'Beautiful girl, always looking into the distance at dusk',src:'img/t.jpg'},
{title:'19',text:'Beautiful girl, always looking into the distance at dusk',src:'img/y.jpg'}
];
waterFull(jsonData);
function waterFull(jsonData){
//Load all images ES6 standard. IE doesn't support it
/*for(var item of jsonData){
var box="<div class='box'><img src='"+item['src']+"'><hr><p>"+item['title']+"</p><span>"+item['text']+"</span></div>";
$('.container').append(box);
}*/
//Load all such as partial ES5 standard
for(var index in jsonData){
var box="<div class='box'><img src='"+jsonData[index].src+"'><hr><p>"+jsonData[index].title+"</p><span>"+jsonData[index].text+"</span></div>";
$('.container').append(box);
}
//It is very important to judge whether the image is loaded or not, because if the image is not loaded, the height of each box cannot be calculated correctly, and there will be problems in positioning
$('img').each(function() {
$(this).load(function(){
loadItem();
});
});
}
var isLoad = true;
$(window).scroll(function(){
/ / Determine whether to load to the bottom
if($(document).scrollTop() + $(window).height() >= $(document).height()){
isLoad=false;
waterFull(jsonData);
}
});
function loadItem(){
//Get each subcontainer box
var items=$('.box');
//Get the width of the container container, the width of each sub-container box, and dynamically calculate the number of columns
var containerWidth=$('.container').innerWidth();
var boxWidth=$('.box').eq(0).outerWidth(true);
var column=Math.floor(containerWidth/boxWidth);
var heightArr = [];
$.each(items,function(index,value){
//Get the height margin+border+padding+width of the subcontainer box
var boxHeight=$(value).outerHeight(true);
//console.log(boxHeight);
// judge the first line
if(index<column){
heightArr[index]=boxHeight;
}else{
var minBoxHeight=Math.min.apply(null,heightArr);
var minBoxIndex=$.inArray(minBoxHeight, heightArr);
//console.log(value);
//Locate the box position
$(value).css({
'position':'absolute',
'top':minBoxHeight+'px',
'left':minBoxIndex*boxWidth+'px'
});
//update min height
heightArr[minBoxIndex]+=boxHeight;
}
});
}
});
</script>
</body>
</html>
principle:
1. Preload all images
2. Determine whether the image is loaded or not
3. Calculate the number of columns by calculating the width of the container and the width of the box
4. Determine whether it is loaded in the first row, and if so, arrange it directly
5. If it is not the first row, judge the height of each column, calculate the minimum height, position the next box in the column with the smallest height, and update the minimum height
6. Determine whether to load to the bottom, if so, go back to the first step to achieve infinite loading