ウォーターフォールフローレイアウトを実現するためのHTML + JS + CSS（遅延読み込みを含む）
数日前、滝の流れのレイアウトでウェブページを作りたかったのですが、いろいろな「神の操作」があり、インターネットで関連する知識のポイントも読んだので、ここに私自身の数時間の要約を示します（添付）ソースコード）
まず、ウォーターフォールフローの原理について説明します。ウォーターフォールフローは、画像やdivなどの多くのデータブロックで構成されていますが、すべてが等しいという理由だけで、幅が等しく、高さが等しくないという1つの特性があります。幅と高さが等しくないので、段階的に配置すると大きな隙間ができ、特に見苦しいです。率直に言って、滝の流れのレイアウトは、写真間の隙間を最大限に活用して合理的なレイアウトにすることです。レイアウトを美しく見せます。
まず、CSSレイアウトに行きましょう（私はもっと美しいものが好きなので、もっと書くので...ちょっと）
*{
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;
}
HTMLコードもここに添付されています（ここではCSSとJSを別々に作成しました）
<!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>
これは、JSを追加しない場合の外観
です。ウォーターフォールフローの原理を理解したら、ウォーターフォールフローと自動読み込みを実装しましょう。最初に最初の行を並べて表示する必要があります。ここに6つの画像があり、次に並べ替えます。 2行目、次に挿入する画像をどこに配置する必要がありますか？各列の高さ、つまりデータブロックの各列の高さを取得し、6つの高さの値を取得できます。どの列に最小の高さで待機中挿入された画像はその列の真下に挿入され、絶対位置を使用して配置されます（絶対位置であるため、上はページの上からの高さです）、左は列に下の図に示すように、挿入するデータブロックの幅画像をここに挿入して
道を開く必要があります。ポイントはここにあります。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;
}
コードは複雑ではありません。数回読んで数回入力することで理解できます。ここでは、主に最後の「関数checkScrollSlide（）」のアイデアを説明します。スライドの効果を実現したいからです。とスライド（つまり、遅延読み込み）なので、比較のために最後の画像を示します。一般的な理解関数「checkScrollSlide（）」の機能は、最後の画像が半分露出したときにロードする必要があることです。
次に、前の「ウォーターフォール」関数のコードは、ページの列数がそれに応じて減少することを認識します〜
このようにして、基本的なウォーターフォールフローのレイアウトが完成します。
しかし、ページが復元された後は混雑します。この問題は私の知識のブラインドゾーンに影響を与えたので、理解している友達がいれば、一緒にコミュニケーションをとることができます。
（コードワードは簡単ではありません。この記事を読むのを手伝ってくれるあなたが、前進する私のモチベーションです、ねえ
（•̀ω•́）✧）