您的位置：首页 > Web前端 > JavaScript

ajax和js实现瀑布流布局

2017-09-28 16:33 411 查看

所谓的瀑布流布局就是浏览器上滑可以加载更多图片(其实是假数据)，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#container{
margin: 0 auto;
/*width: 1204px;*/
position: relative;
}
.box{
padding: 5px;
float: left;
background-color: pink;
}
.box .box_img{
padding: 5px;
border: 1px solid palevioletred;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box img{
width: 150px;
}
</style>
</head>
<body>
<script>
window.onload = function () {
var boxArr = document.getElementsByClassName('box');
var container = document.getElementById('container');
var boxHeightArr = [];
//        console.log(box.offsetWidth);

// 判断什么时候加载数据
function checkFlag(boxHeightArr) {
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//            console.log(scrollTop);
var pageHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight);
//            console.log(pageHeight);
if (scrollTop + pageHeight > Math.min.apply(null, boxHeightArr)) {

return true;
}
}

//求出最矮盒子对应的索引函数
function getMinHeightIndex(arr, minHeight) {
for (var index = 0; index < arr.length; index++) {
if (arr[index] === minHeight) {
return index;
}
}
}

function imgLocation(container, content, boxHeightArr) {
var clientWidth = document.documentElement.clientWidth;
var boxWidth = content[0].offsetWidth;
//floor 求一个小于但最接近它的整数
var cols = Math.floor(clientWidth / boxWidth);
//            console.log(cols);
container.style.width = boxWidth * cols + "px";

for (var i = 0; i < content.length; i++) {
var boxHeight = content[i].offsetHeight;
if (i < cols) {
//在这里创建一个数组
//让这个数组存储第一排 ，每个盒子的高度
boxHeightArr[i] = boxHeight;
} else {
//求出最矮的盒子高度
var minBoxHeight = Math.min.apply(this, boxHeightArr);
//求出最矮盒子对应的索引
var minBoxIndex = getMinHeightIndex(boxHeightArr, minBoxHeight);
//盒子瀑布流定位  顶部间距就是最矮盒子的高度
content[i].style.position = 'absolute';
content[i].style.top = minBoxHeight + 'px';
content[i].style.left = minBoxIndex * boxWidth + 'px';
//关键:更新数组最矮高度,使下一个图片在高度数组中总是找最矮高度的图片下面拼接
boxHeightArr[minBoxIndex] += boxHeight;
}
}
}

imgLocation(container, boxArr, boxHeightArr);

// 数据通过ajax请求获得, 获得的数据如下

window.onscroll = function () {
if(checkFlag(boxHeightArr)){
console.log("现在可以加载数据了");
var imgData = {
"data" :[{"src" : "1.jpg"},{"src" : "2.jpg"},{"src" : "3.jpg"},{"src" : "8.jpg"},{"src" : "6.jpg"}]
};
var data = imgData.data;
for(let item of data){
var newBox = document.createElement('div');
newBox.className = 'box';
container.appendChild(newBox);
var newBoxImage = document.createElement('div');
newBoxImage.className = 'box_img';
var img = document.createElement('img');
img.src = "../img/"+item.src;
newBoxImage.appendChild(img);
newBox.appendChild(newBoxImage);
}
imgLocation(container, boxArr, boxHeightArr);
}
}
}
</script>
<div id="container">
<div class="box">
<div class="box_img">
<img src="../img/1.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/2.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/3.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/4.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/5.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/6.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/7.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/8.jpg" alt="">
</div>
</div>

<div class="box">
<div class="box_img">
<img src="../img/9.jpg" alt="">
</div>
</div>
</div>
</body>
</html>

大致的思路就是先将第一排图片统一宽度排列好，然后筛选出高度最小的那张图片，第二排第一张图片补在高度最小的那张图片下，第二张图片补在高度第二小的图片下，这样依次排列，同时监听浏览器的滚动事件来实现不断加载图片。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航