This article introduces to you the code for the implementation of waterfall flow layout. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>waterfall layout</title>
<link type="text/css" href="./imgs/wf.css" rel="stylesheet"/>
<script type="text/javascript" src="./imgs/wf.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="imgs/0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/22.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/23.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/24.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="imgs/25.jpg"/>
</div>
</div>
</div>
</body>
</html>Copy after login
@CHARSET "UTF-8";
*{margin:0;padding:0}
#main{
position: relative;
margin: 10px auto 0 auto;
}
.box{
float:left;
padding: 0 0 15px 15px;
}
.pic{
border: 1px solid #ccc;
padding: 10px;
}
.box img{
width: 200px;
height: auto;
}Copy after login
window.onload = function(){
waterfall();
//要加载的数据，暂时写一个固定数据
var dataInt = {"data":[{"src":'3.jpg'},{"src":'13.jpg'},{"src":'23.jpg'},{"src":'1.jpg'}]};
//一个判断拖动滚动条后是否加载新内容的方法
window.onscroll = function(){
if(checkScrollSlide()){
//将数据块渲染到当前页的尾部
for(var i = 0; i < dataInt.data.length;i++){
var parent = document.getElementById('main');
var newBox = document.createElement('p');
newBox.className = 'box';
parent.appendChild(newBox);
var newPic = document.createElement('p');
newPic.className = 'pic';
newBox.appendChild(newPic);
var newImg = document.createElement('img');
newImg.src = "./imgs/" + dataInt.data[i].src;
newPic.appendChild(newImg);
waterfall();
}
}
}
}
function waterfall(){
var parent = document.getElementById("main");
//写一个方法根据类名box，找到所有节点
var boxArr = getByClass(parent,'box');
//console.log(boxArr.length);//26，检验是否获取到
var bodyWidth = document.body.clientWidth;
//document.body.clientWidth 窗口实时显示时的body的宽度
var colWidth = boxArr[0].offsetWidth;//box p的宽度
var cols = Math.floor(bodyWidth / colWidth);
//给main p一个宽度，从而让显示内容不会随着浮动，改变布局
var mainWidth = colWidth * cols;
parent.style.cssText = 'width:' + mainWidth + 'px;';
var colsHeight = [];//放列高度的数组
for(var i = 0; i < boxArr.length;i++){
var iBox = boxArr[i];
if(i < cols){
colsHeight.push(iBox.offsetHeight);
}else{
var rArr = searchMin(colsHeight);
var index = rArr[0];
var minH = rArr[1];
var left = parseInt(index * colWidth);
var top = minH;
iBox.style.position = "absolute";
iBox.style.left = left + 'px';
iBox.style.top = top + 'px';
colsHeight[index] += iBox.offsetHeight;
}
}
}
function getByClass(parent,clsName){
//用通配符获得prent下的所有标签节点
var allTags = document.getElementsByTagName("*");
var arr = new Array();
for(var i = 0; i < allTags.length;i++){
if(allTags[i].className == clsName){
arr.push(allTags[i]);
}
}
return arr;
}
function searchMin(arr){
var min = arr[0];
var index = 0;
for(var j = 0; j < arr.length; j++){
if(arr[j] < min){
min = arr[j];
index = j;
}
}
return [index,min];
}
function checkScrollSlide(){
var parent = document.getElementById('main');
var boxArr = getByClass(parent,'box');
var lastBox = boxArr[boxArr.length-1];
var lbHeight = lastBox.offsetTop+Math.floor(lastBox.offsetHeight/2);
console.log(lbHeight);
var slideH = document.body.scrollTop || document.documentElement.scrollTop;
console.log(slideH);
var winH = document.body.clientHeight || document.documentElement.clientHeight;
console.log(winH);
var swHeight = slideH + winH;
return (lbHeight < swHeight) ? true : false;
}Copy after login
Recommended related articles:
div tag: implementation of horizontal centering and vertical centering (with code)
css box-sizing attribute (box model) usage introduction
The above is the detailed content of Code for waterfall flow layout implementation. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
