오늘은 폭포수 흐름의 효과에 대한 또 다른 기사를 작성하는 시간을 갖도록 하겠습니다. iOS에서 작업해본 사람이라면 폭포수 흐름이 iOS에서도 매우 인기 있는 레이아웃 방법이라는 것을 알고 있으므로 여기서는 소개하지 않겠습니다. 폭포수 흐름 효과를 얻기 위해 JS를 사용하는 방법을 살펴보겠습니다.
코드를 방금 입력했는데 안에 있는 댓글이 아주 명확하더군요. 이해가 안 되시면 저한테 물어보셔도 됩니다.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流效果</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--父标签-->
<p id="main">
<p class="box">
<p class="pit">
<img src="images/0.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/1.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/2.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/3.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/4.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/5.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/6.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/7.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/8.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/9.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/10.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/11.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/12.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/13.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/14.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/15.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/16.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/17.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/18.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/19.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/20.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/21.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/22.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/23.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/24.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/25.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/26.jpg">
</p>
</p>
<p class="box">
<p class="pit">
<img src="images/27.jpg">
</p>
</p>
</p>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>CSS:
a, address, b, big, blockquote, body, center, cite, code, dd, del, p, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
padding: 0;
margin: 0;
}
#main {
position: relative;
}
#main .box {
padding: 15px 0 0 15px;
float: left;
}
#main .box .pit {
padding: 5px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 2px gray;
width: 165px;
}
#main .box .pit img {
width: 165px;
}JS:
/**
* Created by huminghao on 2017/7/5.
*/
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : id;
}
// 当页面加载完毕
window.onload = function () {
// 实现瀑布流
waterFlow('main', 'box');
// 监听页面的滚动
window.onscroll = function () {
// 判断是否具备加载图片的条件
if (checkWillLoadImg()) {
// 造数据
var dataImg = {'data' : [{'src' : '0.jpg'}, {'src' : '1.jpg'},{'src' : '2.jpg'},{'src' : '3.jpg'},{'src' : '4.jpg'},{'src' : '5.jpg'},{'src' : '6.jpg'},{'src' : '7.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'},{'src' : '0.jpg'}]}
for (var i = 0; i < dataImg.data; i ++) {
// 创建最外层的盒子
var newBox = document.createElement('p');
newBox.className = 'box';
$('main').appendChild(newBox);
// 创建里面的盒子
var newPic = document.createElement('p');
newPic.className = 'pic';
newBox.appendChild(newPic);
// 创建图片
var newImg = document.createElement('img');
newImg.src = 'images/' + dataImg.data[i].src;
newPic.appendChild(newImg);
}
}
}
}
// 实现瀑布流
function waterFlow(parent, box) {
// 让所有盒子的父标签居中
// 1.拿到所有的盒子
var allBoxs = $(parent).getElementsByClassName(box);
// 2.拿到其中一个盒子的宽度
var boxWidth = allBoxs[0].offsetWidth;
// 3.求出页面的宽度
var screenWidth = document.body.clientWidth;
// 4.求出列数
var clos = Math.floor(screenWidth / boxWidth);
// 5.让父标签居中
$(parent).style.cssText = 'width: ' + clos * boxWidth + 'px; margin: 0 auto';
// 定位
// 定义一个高度数组
var heightArray = [];
// 遍历
for (var i = 0; i < allBoxs.length; i ++) {
// 求出所有盒子的高度
var boxHeight = allBoxs[i].offsetHeight;
if (i<clos) { // 第一行
heightArray.push(boxHeight);
console.log(heightArray);
}else { // 剩余行
// 取出最矮盒子
var minBoxHeight = Math.min.apply(null, heightArray);
// 取出最矮盒子对应的索引
var minBoxIndex = getMinIndex(minBoxHeight, heightArray);
// 对剩余的盒子进行定位
allBoxs[i].style.position = 'absolute';
allBoxs[i].style.top = minBoxHeight + 'px';
allBoxs[i].style.left = minBoxIndex * boxWidth + 'px';
// 替换高度
heightArray[minBoxIndex] = minBoxHeight + boxHeight;
}
}
}
// 求出最矮盒子在数组中的索引
function getMinIndex(value, array) {
for (var i = 0; i < array.length; i ++) {
if (value == array[i]) {
return i;
}
}
}
// 判断是否具备加载图片的条件
function checkWillLoadImg() {
// 拿到所有的盒子
var allBoxs = $('main').getElementsByClassName('box');
// 取出最后一个盒子
var lastBox = allBoxs[allBoxs.length - 1];
// 求出最后一个盒子高度的一半 + 头部偏移的位置
var lastBoxHeightDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
// 求出屏幕的高度
var screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
// 求出页面偏离浏览器的高度
var offSetTop = document.body.offsetTop || document.documentElement.offsetTop;
console.log(lastBoxHeightDis, screenHeight, offSetTop);
return lastBoxHeightDis < (offSetTop + screenHeight) ? true : false;
}위 내용은 JS에서 폭포 흐름 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
