3

我已经在这里发布了几次，但都没有有效的解决方案。

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

我设置了“高度：自动；” 砌体中每个项目的 css。我预计一旦窗口加载完毕，砌体就会生效并按应有的方式布置内容。不幸的是，它加载了 4 列，但图像在高度上都是重叠的。如果我为css设置px的高度，那么它可以工作，但是网站是响应式的，我最好需要auto的高度，因为我不想通过每个媒体查询更改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; }
    });
});
4

3 回答 3

5

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

实现如下：

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

  freeMasonry.imagesLoaded()
    .done(function(){
      freeMasonry.masonry({
        itemSelector: 'img'
      });
    });
于 2014-11-15T00:20:31.040 回答
2

I had to apply a height:XXpx'to each item in the masonry. And then alter that height for the @mediaqueries. Not quite what I was hoping but it worked! Thank you for your idea though.I'm may have just implemented it incorrectly.

Without the height in the CSS for the items in the masonry, it simply overlapped the images etc. I am told through research the .imagesloaded function can be used to achieve this by setting the div height after the images inside the div have loaded. But for me this was the simplest solution.

于 2013-07-27T22:14:31.733 回答
0

可能只是您的浏览器需要重绘元素。这是一个可以解决您的问题的 jquery 函数。

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

于 2013-07-21T23:31:51.000 回答