首先贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#main1, #main2, #main3 {
float: left;
width: 280px;
margin-right: 10px;
margin-left: 100px;
}
.box {
position: relative;
padding: 5px;
border: 1px solid deeppink;
background: pink;
margin-bottom: 5px;
animation: abvc 0.5s 1;
}
.box span {
color: white;
text-align: center;
font-size: 18px;
font-weight: 800;
position: absolute;
bottom: 10px;
width: 270px;
display: block;
background: rgba(0, 0, 0, 0.3);
}
.box img {
width: 100%;
height: auto;
}
@keyframes abvc {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
<script src="jquery-2.1.4.min.js"></script>
<script>
window.onload = function () {
window.onscroll = function () {
addimg()
}
};
var num = 1;
var data = [{src: "one.jpg", title: "文字1"},
{src: "two.jpg", title: "文字2"},
{src: "three.jpg", title: "文字3"},
{src: "four.jpg", title: "文字4"},
{src: "five.jpg", title: "文字5"},
{src: "six.jpg", title: "文字6"},
{src: "seven.jpg", title: "文字7"},
{src: "eight.jpg", title: "文字8"},
{src: "nine.jpg", title: "文字9"},
{src: "ten.jpg", title: "文字10"},
{src: "eleven.jpg", title: "文字11"},
{src: "twlve.jpg", title: "文字12"},
{src: "thirteen.jpg", title: "文字13"},
{src: "fourteen.jpg", title: "文字14"},
{src: "fifteenteen.jpg", title: "文字15"},
{src: "sixteen.jpg", title: "文字16"},
{src: "seventeen.jpg", title: "文字17"},
{src: "eighteen.jpg", title: "文字18"},
{src: "ninteen.jpg", title: "文字19"},
{src: "twenty.jpg", title: "文字20"},
{src: "onea.jpg", title: "文字21"},
{src: "oneb.jpg", title: "文字22"},
{src: "onec.jpg", title: "文字23"},
{src: "oned.jpg", title: "文字24"}
];
function addimg() {
var clienth1 = $("#main1 .box:last").offset().top - $(window).scrollTop() - $("#main1 .box:last").outerHeight();
var clienth2 = $("#main2 .box:last").offset().top - $(window).scrollTop() - $("#main2 .box:last").outerHeight();
var clienth3 = $("#main3 .box:last").offset().top - $(window).scrollTop() - $("#main3 .box:last").outerHeight();
if (clienth1 <= 132 || clienth2 <= 132 || clienth3 <= 132) {
for (var i = 0; i < 4; i++) {
var div = '<div><img src="imgs/' + data[isnum()].src + '" alt="#"/><span>' + data[isnum()].title + '</span></div>';
$("#main" + i).append(div)
}
}
}
function isnum() {
if (num > data.length - 1) {
num = 0;
}
return num++;
}
</script>
</head>
<body>
<div id="pbl">
<div id="main1">
<div class="box">
<img src="imgs/two.jpg" alt="#"/>
<span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/one.jpg" alt="#"/> <span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/three.jpg" alt="#"/> <span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/eleven.jpg" alt="#"/> <span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/ten.jpg" alt="#"/> <span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/oned.jpg" alt="#"/> <span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/twlve.jpg" alt="#"/> <span>内容内容内容</span>
</div>
<div class="box">
<img src="imgs/thirteen.jpg" alt="#"/> <span>内容内容内容</span>
</div>
</div>
<div id="main2">
<div class="box">
<img src="imgs/four.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/five.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/six.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/fourteen.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/fifteen.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/sixteen.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/seventeen.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/eighteen.jpg" alt="#"/>
</div>
</div>
<div id="main3">
<div class="box">
<img src="imgs/seven.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/eight.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/nine.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/ninteen.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/twenty.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/onea.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/oneb.jpg" alt="#"/>
</div>
<div class="box">
<img src="imgs/onec.jpg" alt="#"/>
</div>
</div>
</div>
</body>
</html>然后效果是这样的