Question

我正在处理website

center and right column上的产品位于masonry容器中。

我遇到的问题是如果我将lazy load插件应用到它，因为它具有不同的高度，图像重叠其他容器：

enter image description here

它的外观（不使用延迟加载时）：

enter image description here

关于如何使其发挥作用的任何想法？

这是我的剧本：

Posts.prototype.onBeforeRender = function() {
    var container;
    /* log("Msnry!"); */
    container = document.querySelector('#products_tmpl');
    App.msnry = new Masonry(this.el, {
        itemSelector: '.product',
        columnWidth: container.querySelector('.column-width'),
        gutter: container.querySelector('.gutter-sizer'),
        transitionDuration: '0.1s'
    });
    return delay(1000, this.reRenderLayout);
};

jQuery(function() {
    jQuery("img.lazy").lazyload({
        effect : "fadeIn"
    });
});

Post.prototype.returnImageForPost = function(maxSize) {
  var image_url, thumbnail_images;
  image_url = "";
  if (this.model.get("thumbnail_images") != null) {
    thumbnail_images = this.model.get("thumbnail_images");
    thumbnail_images = _.sortBy(thumbnail_images, function(item) {
      return -item.width;
    });
    _.each(thumbnail_images, function(thumb) {
      if (thumb.width >= maxSize) {
        return image_url = thumb;
      }
    });
  }
  return image_url;
};

这是每个项目的标记：

<div class="product">
    <div class="image">
        <img class="lazy" data-original="<%= post_item.image_url.url %>">
    </div>
    <div class="obra_meta">
        <span class="nombre_artista"><%= item.title %></span>
        <span class="nombre_obra"><%= title %></span>
    </div>
</div>

Answer 1

您应该在加载图像后重新计算product-div的高度。您可以在load函数中添加lazyload参数，如下所示：

jQuery(function() {
    jQuery("img.lazy").lazyload({
        effect : "fadeIn",
        load : adjustHeights
    });
});

由于您的产品div是绝对的，您必须自己设定位置。因此，调整高度的功能应该是这样的：

function adjustHeights() {

    var columnheight1 = 10;
    var columnheight2 = 10;

    jQuery('.product').each(function(){
        //if product in left column
        itemheight = jQuery(this).height();
        if(jQuery(this).css('left') == '0px'){
            jQuery(this).css('top', columnheight1 + 'px');
            columnheight1 += itemheight + 30;
        }else{
        //if in right column
            jQuery(this).css('top', columnheight2 + 'px');
            columnheight2 += itemheight + 30;
        }

    });

    //don't forget to set post-container to the highest height
    if(Math.max(columnheight1, columnheight2) >0){
        jQuery('.products').css('height', Math.max(columnheight1, columnheight2) + 'px');
    }
}

它遍历所有图像并将它们推送到每列中位于它们上方的div下面。

修改

根据fiddle

Answer 2

考虑到，对于lazyload最好的工作是当你知道图像大小时（根据这个：http://www.appelsiini.net/projects/lazyload），我建议实际上有图像大小。

您可以在通过PHP加载图像之前获取，请检查： http://php.net/manual/en/function.getimagesize.php

因为我不知道post_item.image_url的结构我假设您有可能向对象添加其他参数，在本例中为高度。

然后我会更新post_item对象的模板以包含高度（如果需要还有宽度），然后我会将模板更新为：

<div class="product">
    <div class="image">
        <img class="lazy" data-original="<%= post_item.image_url.url %>" height="<%= post_item.image_url.height %>">
    </div>
    <div class="obra_meta">
        <span class="nombre_artista"><%= item.title %></span>
        <span class="nombre_obra"><%= title %></span>
    </div>
</div>

高度也符合W3C图像： http://www.w3schools.com/tags/att_img_height.asp

Masonry和Lazy负载集成

2 个答案: