Question

我已经在这里发过几次这样的帖子但是没有一个有效的解决方案。

我正在使用 jquery masonry 来布置大量带有图像和标题的div。

我设置了“height：auto;”对于砌体中每个项目的CSS。我预计一旦窗口加载，那么砌体就会生效并按原样布置内容。不幸的是，它加载了4列，但图像的高度都是重叠的。如果我为css设置 px 的高度，那么它可以工作，但网站是响应的，我需要自动高度，因为我不想通过每个媒体查询更改css高度...

感谢任何帮助：）

由于

JS代码是：

    $(window).load(function()
{
    var columns    = 4,
        setColumns = function() { columns = $( window ).width() > 700 ? 4 : $( window ).width() > 480 ? 2 : 1 };

    setColumns();
    $( window ).resize( setColumns );

    $( '#container' ).masonry(
    {
        itemSelector: '.item',
        gutterWidth: 66,
        isFitWidth: true,
        isAnimated: true,
        columnWidth:  function( containerWidth ) { return containerWidth / columns; }
    });
});

Answer 1

你绝对应该使用imagesLoaded： http://imagesloaded.desandro.com/

如此实施：

  //le masonry
  var freeMasonry = $('.masonry');

  freeMasonry.imagesLoaded()
    .done(function(){
      freeMasonry.masonry({
        itemSelector: 'img'
      });
    });

Answer 2

我必须对砌体中的每个项目应用高度：XXpx'。然后改变@mediaqueries的高度。不是我希望但它有效！谢谢你的想法。我可能刚刚错误地实现了它。

没有CSS中砌体中物品的高度，它只是重叠图像等。我通过研究告诉.imagesloaded函数可以通过设置div内部图像后的div高度来实现这一点加载。但对我来说这是最简单的解决方案。

Answer 3

可能只是您的浏览器需要重绘元素。 Here is a jquery function可以解决您的问题。

在砌体初始化后调用该函数，看看是否能解决问题。

在调整大小窗口之前，砌体不起作用

3 个答案: