首页 / JAVASCRIPT / JS如何实现瀑布流效果
JS如何实现瀑布流效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS如何实现瀑布流效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5578字，纯文字阅读大概需要8分钟。
内容图文
今天抽空再写一篇，写个瀑布流的效果。做过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如何实现瀑布流效果的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JS如何实现瀑布流效果全部内容，希望文章能够帮你解决JS如何实现瀑布流效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】