Tengo el siguiente código que me va cargando las imágenes cuando bajo el scroll, pero las mismas imágenes siguen apareciendo a medida que sigo bajando el scroll, lo hace indefinidamente, quiero que al encontrar la última imágen finalice.
$(window).on('load',function(){
waterFall();
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
$(window).on('scroll',function(){
if(checkScrollSlide()){
$.each(dataInt.data,function(key,value){
var oBox=$('<div>').addClass('box').appendTo($('#main'));
var oPic=$('<div>').addClass('pic').appendTo(oBox);
$('<img>').attr('src','images/'+$(value).attr('src')).appendTo(oPic);
});
waterFall();
}
});
});
function waterFall() {
var $boxs=$('#main>div');
var w=$boxs.eq(0).outerWidth();
var cols=Math.floor($(window).width()/w);
$("#main").width(w*cols).css('margin','0 auto');
var hArr=[];
$boxs.each(function(index,value){
var h=$boxs.eq(index).outerHeight();
if(index<cols){
hArr.push(h);
}else {
minH=Math.min.apply(null,hArr);
var minHeightIndex=$.inArray(minH,hArr);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHeightIndex*w+'px'
});
hArr[minHeightIndex]+=$boxs.eq(index).outerHeight();
}
});
}
// scroll infinito
function checkScrollSlide() {
var $lastBox=$('#main>div').last();
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}
Cada vez que hago scroll se genera un array con las imágenes:
El html:
<body>
<div id="main">
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/01.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/03.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/05.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/06.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/07.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/08.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/09.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/10.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/11.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/12.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/10.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/11.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/12.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/13.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/14.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/15.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/16.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/17.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/18.jpg"> </div>
</div>
<div class="box">
<div class="pic"> <img class="img-fluid" src="images/19.jpg"> </div>
</div>
</div>
</body>