怎么解决瀑布流加了懒加载后瀑布流没效果了？

Question

window.onload = function () {
  loadMeinv();
}
function loadMeinv() {
  var data = 30;
  var $arrUl = $(".main #container ul");
  var $minUl = $arrUl.eq(0);
  for (var i = 0; i <= data; i++) {
    var html = "";
    html = '<li><div class="water_pic"><img class="pic" loading="lazy" src="img/white.gif"  data-src = img/' +
      i + '.jpg></div><div class="water_user">感恩节' +
      i + '</div></li>';
    for (var j = 0; j < $arrUl.length; j++) {
      if ($arrUl.eq(j).outerHeight() < $minUl.outerHeight()) {
        $minUl = $arrUl.eq(j);
      }
    }
    $minUl.append(html);
  }
}

懒加载

 window.onscroll = function () {
    if(document.body.clientWidth>1440){
      start()//滚动过程中动态加载图片
    }else{
      start1()
    }
     
  };

    function start() {
      $('.pic').not('[data-isLoaded]').each(function () {
        var $node = $(this)
        if (isShow($node)) {
          loadImg($node)
        }
      })
    }

    function isShow($node) { // 判断图片是否在视野中
      return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }

    function loadImg($img) {
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1) // 区别图片是否被加载过，防止重新加载
    }

Answer 1

参考GPT和自己的思路：

根据您提供的代码，瀑布流布局是通过将图片放置在不同的 ul 元素中来实现的。在添加懒加载功能后，由于图片初始状态的 src 属性都是 "img/white.gif"，因此无法根据 offsetHeight 或者 scrollHeight 来正确计算 ul 元素的高度。这样就导致了瀑布流布局失效。

一种解决方法是，在图片加载前通过代码获取图片的高度并将其保存，然后再将图片 src 属性设置为实际的图片路径。例如，可以使用以下代码：

function loadImg($img) {
  var img = new Image();
  img.src = $img.attr('data-src');
  img.onload = function() {
    $img.attr('src', img.src);
    $img.attr('data-isLoaded', 1);
    var $li = $img.closest('li');
    var $ul = $li.closest('ul');
    $ul.css({'height': $ul.height() + $li.outerHeight()}); // 更新 ul 元素的高度
  }
}

在图片成功加载后，通过 closest() 方法找到其所属的 li 元素以及其所在的 ul 元素，并更新 ul 的高度。这样瀑布流布局就能够正确地计算不同 ul 元素的高度，达到预期效果。

另外，为了避免重复加载已经加载过的图片，可以在完成懒加载后，给图片添加 data-isLoaded 属性，表示该图片已经被加载过，下次不再需要处理。