首先貼代碼<!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>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/one.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/three.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/eleven.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/ten.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/oned.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/twlve.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</span>
????????</div>
????????<div?class="box">
????????????<img?src="imgs/thirteen.jpg"?alt="#"/>?<span>內(nèi)容內(nèi)容內(nèi)容</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>????然后效果是這樣的24張圖片沒(méi)有無(wú)限出現(xiàn)，只出現(xiàn)這么幾張，怎么辦？
自己寫(xiě)個(gè)瀑布流遇到了問(wèn)題
老子的意大利炮4333415
2016-12-15 13:49:04