HTML + JS + CSS to achieve waterfall flow layout (including lazy loading)
A few days ago, I wanted to make a webpage with waterfall flow layout, and then there were various "sacred operations", and I also read some related knowledge points on the Internet; so here is a summary of my own few hours (attached) Source code)
First of all, let’s talk about the principle of waterfall flow: waterfall flow is composed of many data blocks, which can be pictures or divs, but they all have one characteristic, that is, equal width and unequal height, precisely because it is equal width and unequal height , So if you arrange step by step, there will be a big gap, which is particularly unsightly. To put it bluntly, the waterfall flow layout is to make full use of the gap between the pictures to make a reasonable layout and make the layout look good.
First, let’s go to CSS layout (because I like more beautiful things, so I write more...hey)
*{
margin: 0 ;
padding: 0;
background-color: #333;
}
.container{
position: relative;
width: 1200px;
margin: 20px auto;
}
.container .box{
display: flex;
width: 178px;
margin: 20px 0 30px ;
padding: 5px 0 0 15px;
float: left;
overflow: hidden;
}
.container .box .active{
padding: 10px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.container .box img{
max-width: 100%;
}
.container .box h2{
margin: 10px 0 0;
padding: 0;
font-size: 20px;
color: white;
}
.container .box p{
margin: 0;
padding: 0 0 10px;
font-size: 16px;
color: floralwhite;
}
The HTML code is also attached here (here I wrote CSS and JS separately)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link href="css/falls.css" rel="stylesheet" />
<script src="js/falls.js"></script>
<body>
<div id="container" class="container">
<div class="box">
<div class="active">
<img src="img/1.png" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/2.png" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/3.jpg" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/4.png" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/5.png" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/6.png" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/7.jpg" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
<div class="box">
<div class="active">
<img src="img/8.png" />
<h2>this is title</h2>
<p>You just need to know what to look.</p>
</div>
</div>
</div>
</body>
</html>
This is what it looks like without adding JS
. After we understand the principle of waterfall flow, let's implement waterfall flow and automatic loading; first we need to tile the first line, here we have six pictures, and then it is time to tile the second line , Then where should the image to be inserted be placed? We can get the height of each column, that is, the height of each column of the data block, and get the value of six heights. We calculate which column has the smallest height and put the waiting The inserted picture is inserted directly below that column, and it is positioned using absolute positioning (because it is absolute positioning, so top is the height from the top of the page), left is the column multiplied by the width of the data block, as shown in the figure below, to be inserted The picture should be inserted here to
pave the way, the point is here! JS
window.onload=function(){
//开始即调用
waterfall('container','box')
var dataInt = {
"data": [
{"src": '1.png'},{"src": '2.png'},
{"src": '3.jpg'},{"src": '4.png'},
{"src": '5.png'},{"src": '6.png'},
{"src": '7.jpg'},{"src": '8.png'},
]
}
//监听滚动条事件
window.onscroll=function(){
//检查是否具备了滚动条件
if(checkScrollSlide){
var ocontent = document.getElementById('container');
//创建div，并将其加到所有box后面
for(var i = 0; i < dataInt.data.length; i++) {
var obox = document.createElement('div');
obox.className = 'box';
ocontent.appendChild(obox);
var opic = document.createElement('div');
opic.className = 'active';
obox.appendChild(opic);
var oimg = document.createElement('img');
oimg.src = "img/" + dataInt.data[i].src;
opic.appendChild(oimg);
var oh=document.createElement('h2')
oh.innerHTML='this is title'
opic.appendChild(oh);
var op=document.createElement('p')
op.innerHTML='You just need to know what to look.'
opic.appendChild(op)
}
waterfall('container', 'box');
}
}
}
function waterfall(content,box){
//获取大盒子（container）里的所有小盒子（box）
var ocontent=document.getElementById(content);
var oboxs=getByClass(ocontent, box);
//计算整个页面显示的列数(页面宽/box的宽);
var oboxW = oboxs[0].offsetWidth;
//Math.floor 向下取整
var cols = Math.floor(document.documentElement.clientWidth / oboxW);
//设置container的宽度（这里用刚刚计算出来的列数乘盒子的宽度（oboxW * cols）得到的）
ocontent.style.cssText = 'width:' + oboxW * cols + 'px;margin:20 auto';
var heightArr = [];
for(var i = 0; i < oboxs.length; i++) {
if(i < cols) {
// 将前cols张图片的宽度记录到hArr数组中(第一行的高度)
heightArr.push(oboxs[i].offsetHeight);
} else {
//从第二行开始就开始找最小的高度了，决定带插入图片该插入到哪里
//js Math.min.apply()方法，取出数组中的最小值
var minH = Math.min.apply(null, heightArr);
var index = getMinhIndex(heightArr, minH);
// 设置最小高度的图片的style为绝对定位，并设置top和left
oboxs[i].style.position = 'absolute';
oboxs[i].style.top = minH + 'px';
oboxs[i].style.left = oboxs[index].offsetLeft+'px';
heightArr[index] += oboxs[i].offsetHeight;
}
}
}
//返回所有的box盒子
function getByClass(content, cName){
var boxArr = new Array(),
oElements = content.getElementsByTagName('*');
for(var i = 0; i < oElements.length; i++) {
if(oElements[i].className == cName) {
boxArr.push(oElements[i]);
}
}
return boxArr;
}
//获取数组中最小值的下标值
function getMinhIndex(arr, val) {
for(var i in arr) {
if(arr[i] == val) {
return i;
}
}
}
//定义函数检测是否具备了滚动加载数据块的条件
function checkScrollSlide(){
var ocontent = document.getElementById('container');
var oboxs = getByClass(ocontent, 'box');
//获取最后一个box到顶部的距离+ 它自身一半的距离
var lastboxH = oboxs[oboxs.length - 1].offsetTop + Math.floor(oboxs[oboxs.length - 1].offsetHeight / 2);
//获取滚动条滚动距离（为了消除标准模式和怪异模式之间的差别而做的兼容）
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 获取window可视化的高度
var height = document.body.clientHeight || document.documentElement.clientHeight;
return(lastboxH < scrollTop + height) ? true : false;
}
The code is not complicated. It can be understood by reading it a few times and typing it a few times. Here we mainly explain the idea of the last "function checkScrollSlide()"; because we want to achieve the effect of sliding and sliding (that is, lazy loading), so we Here is the last picture for comparison. The function of the popular understanding function "checkScrollSlide()" is that when the last picture is half exposed, you should load it.
Then the code in the previous "waterfall" function realizes that the number of columns in the page will be reduced accordingly~
In this way, our basic waterfall flow layout is completed.
But after the page is restored, it will be crowded together. This problem has touched my knowledge blind zone, so if there are friends who understand, you can communicate together.
(Codewords are not easy, you who can help me read this article are my driving force, hey
(•̀ ω • ́ )✧)