0

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:

introducir la descripción de la imagen aquí

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>

1 respuesta 1

1

Podrías contar la cantidad de main>div que han ido cargandose, y compararlo con el tamaño del array. Para aprovechar la función checkScrollSlide(), trata de hacer algo como ésto:

$(window).on('load',function(){
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]};
var NumberOfItems = dataInt.data.length;
$(window).on('scroll',function(){
if(checkScrollSlide(NumberOfItems)){
    $.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);
    });
}
});
});

// scroll infinito

function checkScrollSlide(NumberOfItems) {
    if($('#main>div').length >= NumberOfItems)
      return false;
    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;
}

Los cambios han sido: var NumberOfItems = dataInt["data"].length; para contar la cantidad de imágenes en el array, y así pasarlo como argumento a la función checkScrollSlide(NumberOfItems) En dicha función, se obtienen la cantidad de main>div y se compara su tamaño con el agumento NumberOfItems y devolver false para que deje de cargar items indefinidamente.

EDIT: He eliminado por completo el metodo waterfall, ya que el css del OP se encarga de colocar los elementos en cuadrícula, ajustandose automáticamente sin necesidad de utilizar javascript.

19
  • Hola, gracias por responder... Lo hice pero igualmente está el scroll infinito... Obtuve el valor de la variable NumberOfItems y corresponde al número de fotos, pero igualmente el scroll es infinito.
    – Joe
    Commented el 25 may. 2020 a las 16:08
  • agregaste el if dentro de la funcion checkScrollSlide ? me refiero a: if($('#main>div').length >= NumberOfItems) return false; Comprobe el código como medianamente pude ya que no conozco el html y me funcionó Edito: mirando otra pregunta que tienes, muestras el html de la galería. Alli los div están dentro del div id "gallery" y no de "main". Revisa por si has cambiado el nombre no sea problema de que el if deba llevar gallery>div
    – Israel
    Commented el 25 may. 2020 a las 16:17
  • Si coloqué el if, si tengo varias pruebas y en una tengo gallery en vez de main pero en este caso uso main
    – Joe
    Commented el 25 may. 2020 a las 17:03
  • imprimo con console.log(dataInt.data); y me trae el array con las fotos indefinidamente, voy a subir el capture a la pregunta
    – Joe
    Commented el 25 may. 2020 a las 17:21
  • Ya subí la imagen
    – Joe
    Commented el 25 may. 2020 a las 17:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.