HTML + JS + CSS para obter o layout de fluxo em cascata (incluindo carregamento lento)
Alguns dias atrás, eu queria fazer uma página da web com layout de fluxo em cascata e, em seguida, havia várias "Operações de Deus", e também li alguns pontos de conhecimento relacionados na Internet; então, aqui está um resumo das minhas próprias horas (em anexo ) Código fonte)
Antes de mais nada, vamos falar sobre o princípio do fluxo em cascata: o fluxo em cascata é composto por muitos blocos de dados, que podem ser imagens ou divs, mas todos têm uma característica, ou seja, largura igual e altura desigual, justamente por ser igual largura e altura desigual. Portanto, se você organizar passo a passo, haverá uma grande lacuna, o que é particularmente desagradável. Para ser franco, o layout do fluxo em cascata é usar totalmente a lacuna entre as imagens para fazer um layout razoável e fazer o layout parecer bom.
Primeiro, vamos para o layout CSS (porque gosto de coisas mais bonitas, então escrevo mais ... ei)
*{
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;
}
O código HTML também está anexado aqui (aqui eu escrevi CSS e JS separadamente)
<!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>
Isso é o que parece sem adicionar JS
. Depois de entender o princípio do fluxo em cascata, vamos implementar o fluxo em cascata e carregamento automático; primeiro precisamos colocar a primeira linha lado a lado, aqui temos seis imagens e, em seguida, é hora de colocar o segunda linha, então onde deve ser colocada a imagem a ser inserida? Podemos obter a altura de cada coluna, ou seja, a altura de cada coluna do bloco de dados, e obter o valor de seis alturas. Calculamos qual coluna tem o A imagem inserida é inserida diretamente abaixo daquela coluna, e é posicionada usando posicionamento absoluto (porque é posicionamento absoluto, então topo é a altura do topo da página), à esquerda é a coluna multiplicada pela largura do bloco de dados, como mostra a figura abaixo, a ser inserido A imagem deve ser inserida aqui para
pavimentar o caminho, o ponto é aqui! 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;
}
O código não é complicado. Pode ser entendido lendo-o algumas vezes e digitando-o algumas vezes. Aqui explicamos principalmente a ideia da última "função checkScrollSlide ()"; porque queremos obter o efeito de deslizamento e deslizamento (isto é, carregamento lento), então nós Aqui está a última imagem para comparação. A função da função de compreensão popular "checkScrollSlide ()" é que quando a última imagem estiver parcialmente exposta, você deve carregá-la.
Então, o código na função "cascata" anterior percebe que o número de colunas na página será reduzido de acordo ~
Desta forma, nosso layout básico de fluxo em cascata é concluído.
Mas depois que a página for restaurada, ela ficará agrupada. Esse problema afetou minha zona cega de conhecimento, portanto, se houver amigos que entendam, vocês podem se comunicar.
(Palavras-código não são fáceis, você que pode me ajudar a ler este artigo é minha motivação para seguir em frente, hey
(• ̀ ω • ́) ✧)