效果图
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="stylesheet" href="css/baseCss.css">
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.min.js"></script>
</head>
<body>
<div class="content">
<ul class="flowBox">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index1.js"></script>
</body>
</html>
css
@import (reference) "common";
.content {
width: 1000px;
margin: 20px auto;
ul{
//对浮动元素的父级添加overflow:hidden解决子盒子无法撑开父盒子的问题
overflow: hidden;
li{
@W:300px;
float: left;
width: @W;
margin-right: 50px;
&:nth-of-type(3n){
margin-right: 0;
}
a{
display: block;
border: 1px solid lightseagreen;
border-radius: 0 0 20px 20px ;
margin-bottom: 20px;
&:hover{
box-shadow: 1px 1px 10px rgba(0,0,0,.3);
}
div{
width: @W;
img{
width: @W;
}
}
span{
display: block;
line-height: 20px;
margin: 5px 0;
padding: 0 10px;
font-size: 12px;
color: #9e7e6b;
}
}
}
}
}
js
$(function($) {
let imgData = null,
page = 0,
isRun = false;
let queryData = () => {
page++
//参数忘了
$.ajax({
method: 'get',
url: `json/data.json?page=${page}`,
async: false,
dataType: 'json',
success: result => {
imgData = result;
}
});
};
let bindHTML = () => {
// let $boxList = $('.flowBox > li'),
// boxList = [].slice.call($boxList);
// let queryHTML = ({ id, content, img } = {}) => {
// if (typeof id === "undefined") {
// return '';
// }
// return `<a href="#">
// <div><img src="${img}" alt=""></div>
// <span>${content}</span>
// </a>`;
// };
// for (let i = 0; i < imgData.length; i += 3) {
// let item0 = imgData[i],
// item1 = imgData[i + 1],
// item2 = imgData[i + 2];
// boxList.sort((a, b) => {
// return a.offsetHeight - b.offsetHeight;
// });
// boxList.forEach((item, index) => {
// item.innerHTML += queryHTML(eval('item' + index));
// });
// }
// isRun = false;
let $boxList = $('.flowBox > li');
for (let i = 0; i < imgData.length; i += 3) {
$boxList.sort((a, b) => {
return $(a).outerHeight() - $(b).outerHeight();
}).each((index, curLi) => {
let {
content,
img
} = imgData[i + index];
$(`<a href="#">
<div><img src="${img}" alt=""></div>
<span>${content}</span>
</a>`).appendTo(curLi);
});
}
isRun = false;
};
let scrollBottom = () => {
$(window).on('scroll', () => {
let pageH = document.documentElement.scrollHeight || document.body.scrollHeight,
winH = $(window).outerHeight(),
scrollT = $(window).scrollTop();
if ((scrollT + winH + 100) >= pageH) {
if (isRun) return;
isRun = true;
if (page > 3) {
alert('没有更多数据了');
return;
}
queryData();
bindHTML();
}
});
};
queryData();
bindHTML();
scrollBottom();
});