Maison > Article > interface Web > Code pour la mise en œuvre de la disposition du flux en cascade
Code pour la mise en œuvre de la disposition du flux en cascade
- 不言original
- 2018-08-07 09:52:061861parcourir
Cet article vous présente le code pour l'implémentation de la disposition du flux en cascade. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
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>wf.css
@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;
}
wf.js
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;
}
Articles connexes recommandés :
balise div : implémentation du centrage horizontal et du centrage vertical (avec code)
Introduction à l'utilisation de l'attribut CSS box-sizing (modèle de boîte)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn