1.demo项目结构
2.数据准备
本次demo只有前端部分没有后端数据,所以采用json格式的假数据,将json中的数据作为模拟数据渲染到页面上即可。
falls.json
{
"success":true,
"row":[{
"src":"img/0.jpg"
},{
"src":"img/1.jpg"
},{
"src":"img/2.jpeg"
},{
"src":"img/3.jpg"
},{
"src":"img/4.jpg"
},{
"src":"img/5.jpg"
},{
"src":"img/6.jpg"
},{
"src":"img/7.jpeg"
},{
"src":"img/8.jpg"
}]
}
3.创建页面
demo只是为了展示图片,设计较为简单,只需要一个 div 容器,另外引入 CSS 与 JS 依赖即可。
falls.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/falls.js"></script>
<link rel="stylesheet" type="text/css" href="css/falls.css"/>
</head>
<body>
<div id="container">
</div>
</body>
</html>
falls.css
body {
margin: 0;
padding: 0;
background-color: #ccc;
}
#container:after {
content: "";
display: block;
clear: both;
}
#container {
width: 1300px;
margin: 0 auto;
}
#container .img-box {
cursor: pointer;
}
#container .img-box {
float: left;
padding: 5px;
}
#container .img-box img {
width: 250px;
height: auto;
}
4.实现瀑布流效果
4.1 初始化
将公共属性封装到一个对象中并初始化。
var falls = {
//每列当前的高度
topArry: [0, 0, 0, 0, 0],
//每列当前距离浏览器的左边距
leftArry: [],
//每次加载的图片
imgArray: [],
//每次加载的第一张图片相对于所有图片(包括已加载图片)的索引
num: 0,
//加载图片数,默认 9 张,根据实际修改
dataNum: 9,
};
//初始化函数
$(function () {
getData();
getMinHeight();
});
4.2 获取json数据与展示
这里我们需要获取模拟的 JSON 数据,主要是用到 jQuery 的 getJSON(url, callback) 函数:
function getData() {
$.getJSON('json/falls.json', function (data) {
if (data.success) {
var row = data.row,
len = row.length,
html = '';
//将获取到的数据通过字符串连接的方式添加到 html 内容中
for (var i = 0; i < len; i++) {
html +=
"<div class='img-box'>" + "<img src='" + row[i].src + "'/></div>";
}
$('#container').append(html);
getLeft();
//可确保不同的显示器屏幕能初始化时便将图片布满屏幕
if (getMinHeight() < window.screen.height) {
getData();
}
falls.imgArray = [];
$('#container .img-box').each(function (i) {
if (i >= falls.num) {
falls.imgArray.push(this);
}
});
falls.num += falls.dataNum;
//修改每张图片的位置
reset();
}
});
}
每次加载时都需要将图片放到当前显示的最短的那列图片之下,所以需要通过保存每列当前高度的全局数组找到最短的那一列图片,并返回其值。
function getMinHeight() {
var minHeight = Math.min.apply(null, falls.topArry);
return minHeight;
}
function getLeft() {
for (var i = 0; i < 5; i++) {
var left = $('#container .img-box').eq(i).offset().left;
falls.leftArry.push(left);
}
}
得到最短一列图片后,便可根据两个数组topArray[]、leftArray[]对应的索引值相同,很容易的找到最短那一列距离浏览器的左边距,控制图片的定位也就很容易实现了。
function reset() {
var img = falls.imgArray;
for (var i = 0, len = img.length; i < len; i++) {
var minHeight = getMinHeight(),
index = 0;
for (var x = 0; x < falls.dataNum; x++) {
if (minHeight == falls.topArry[x]) {
index = x;
break;
}
}
$(img[i]).css({
position: 'absolute',
top: minHeight,
left: falls.leftArry[index],
});
falls.topArry[index] += $(img[i]).height();
}
}
最后绑定鼠标滚轮滚动事件。
window.onscroll = function () {
var minHeight = getMinHeight();
//当屏幕滚动的距离大于最短高度的二分之一(可任意设置,看个人喜好),再次加载图片
if (window.scrollY > minHeight / 2) {
getData();
}
};
效果展示:
demo源码下载地址:demo源码下载