Use javascript, jquery, and css to implement waterfall flow layout:
The first way: use JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Waterfall flow layout</title>
<style>
*{padding:0;margin:0;}
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="main clearfix" >
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
<div class="box">
<div class="pic"><img src="./images/"></div>
</div>
</div>
<script>
= function(){
waterfall('main','box');
//Simulate json datavar dataJson = {'data': [{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''}]};
// Listen to scroll events = function(){
var isPosting = false;
if(checkScollSlide('main','box') && !isPosting){
var oParent = ('main');
for(var i in ){
isPosting = true;
var oBox = ('div');
= 'box';
= '<div class="pic"><img src="./images/'+[i].src+'"></div>';
(oBox);
}
isPosting = false;
waterfall('main','box');
}
}
}
/*
* parent parent element id clsName block element class*/
function waterfall(parent,clsName){
//Get parent elementvar oParent = (parent),
//Get all boxesaBoxArr = (clsName),
//Single box widthiBoxW = aBoxArr[0].offsetWidth,
// Number of columnscols = ( / iBoxW);
= 'width:'+iBoxW*cols+'px;margin:0 auto;';
//Storage all heightsvar hArr = [];
for(var i = 0; i < ; i++){
if(i < cols){
hArr[i] = aBoxArr[i].offsetHeight;
}else{
//Get the minimum value of hArrvar minH = (null,hArr),
// hArr minimum value index indexminHIndex = getMinHIndex(hArr,minH);
aBoxArr[i]. = 'position:absolute;top:'+minH+'px;left:'+aBoxArr[minHIndex].offsetLeft+'px;';
//Add hArr after adding elementshArr[minHIndex] += aBoxArr[i].offsetHeight;
}
}
}
//Get the minimum value indexfunction getMinHIndex(arr,val){
for(var i in arr){
if(arr[i] == val){
return i;
}
}
}
//Check whether the load data conditions are met, parent parent element id clsName block element classfunction checkScollSlide(parent,clsName){
var oParent = (parent),
aBoxArr = (clsName),
// Half of the offsetTop+height of the last box elementlastBoxH = aBoxArr[ - 1].offsetTop + aBoxArr[ - 1].offsetHeight / 2,
//Compatible with js standard mode and mixed modescrollTop = || ,
height = || ;
return lastBoxH < scrollTop + height ? true : false;
}
</script>
</body>
</html>
The second method: use jquery: (html structure is the same as css)
$( window ).on( "load", function(){
waterfall('main','box');
//Simulate data json var dataJson = {'data': [{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''},{'src':''}]};
=function(){
var isPosting = false;
if(checkscrollside('main','box') && !isPosting){
isPosting = true;
$.each(,function(index,dom){
var $box = $('<div class="box"></div>');
$('<div class="pic"><img src="./images/'+$(dom).attr('src')+'"></div>');
$('#main').append($box);
waterfall('main','box');
isPosting = false;
});
}
}
});
/*
parent id
clsName element class
*/
function waterfall(parent,clsName){
var $parent = $('#'+parent);//parent element var $boxs = $('.'+clsName);//All box elements var iPinW = $( 0 ).width()+15;// The width of a block box var cols = ( $( window ).width() / iPinW );//Number of columns $(iPinW * cols).css({'margin': '0 auto'});
var pinHArr=[];// Used to store the heights of all block boxes in each column. $( function( index, dom){
if( index < cols ){
pinHArr[ index ] = $(dom).height(); //Height of all columns }else{
var minH = ( null, pinHArr );//The minimum value minH in the array pinHArr var minHIndex = $.inArray( minH, pinHArr );
$(dom).css({
'position': 'absolute',
'top': minH + 15,
'left': $( minHIndex ).position().left
});
//Modify pinHArr after adding elements pinHArr[ minHIndex ] += $(dom).height() + 15;//Update the column height after adding block box }
});
}
//Check whether the loading data conditions are met, that is, the height of the function waterfall() triggered to add the block box: the last block box is from the top of the web page + half of its height (the implementation starts loading without rolling to the end)function checkscrollside(parent,clsName){
//The last block box var $lastBox = $('#'+parent).find('.'+clsName).last(),
lastBoxH = $().top + $()/ 2,
scrollTop = $(window).scrollTop(),
documentH = $(document).height();
return lastBoxH < scrollTop + documentH ? true : false;
}
The third method: use css: (html structure is the same as above)
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.main {
position: relative;
[color=#ff0000]-webkit-column-width: 210px;
-moz-column-width: 210px;
-webkit-column-gap: 5px;
-moz-column-gap: 5px;[/color]
}
.box {
float: left;
padding: 15px 0 0 15px;
}
.box .pic {
width: 180px;
height: auto;
padding: 10px;
border-radius: 5px;
box-shadow: 0 0 5px #cccccc;
border: 1px solid #cccccc;
}
.box .pic img {
display: block;
width: 100%;
}
Comparison of implementation methods of waterfall flow:
Javascript native method/jquery method
1. It needs to be calculated, the number of columns = browser window width/image width, and the image positioning is to calculate the position of the image based on the height of each column;
2. Picture sorting is arranged horizontally according to the position calculated by the picture. The position is calculated and is relatively standardized.
Css method
1. No calculation is required, the browser automatically calculates, just set the column width and the performance is high;
2. The column width changes with the size of the browser window, and the user experience is not good;
3. The picture sort is arranged in vertical order to disrupt the display order of the picture;
4. Image loading still depends on javascript/jquery to implement it
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!