<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,
img {
border: 0;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
/* container */
#container {
940px;
margin: 50px auto;
}
#container ul {
300px;
list-style: none;
float: left;
margin-right: 20px;
}
#container ul li {
margin-bottom: 20px;
}
#container ul li img {
300px;
}
</style>
</head>
<body>
<div id="container">
<ul class="col">
<li><img src="1.jpg" alt="" /></li>
<li><img src="2.jpg" alt="" /></li>
<li><img src="3.jpg" alt="" /></li>
</ul>
<ul class="col"></ul>
<ul class="col" style="margin-right:0"></ul>
</div>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function() {
function loadMeinv() {
var data = 0;
for(var i = 0; i < 9; i++) { //每次加载时模拟随机加载图片
data = parseInt(Math.random() * 9);
var html = "";
html = '<li><img src = '
+
data + '.jpg><p>src='
+
data + '.jpg</p></li>';
$minUl = getMinUl();
$minUl.append(html);
}
}
loadMeinv();
$(window).on("scroll", function() {
$minUl = getMinUl();
if($minUl.height() <= $(window).scrollTop() + $(window).height()) {
//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
loadMeinv();
}
})
function getMinUl() { //每次获取最短的ul,将图片放到其后
var $arrUl = $("#container .col");
var $minUl = $arrUl.eq(0);
$arrUl.each(function(index, elem) {
if($(elem).height() < $minUl.height()) {
$minUl = $(elem);
}
});
return $minUl;
}
})
</script>
</div>
</body>
</html>