在调整窗口大小之前，砌体不工作答案

【问题标题】：Masonry is not working until resize window在调整窗口大小之前，砌体不工作
【发布时间】：2013-07-21 22:45:29
【问题描述】：

我已经在这里看到过这个帖子了几次，但都没有一个有效的解决方案。

我正在使用 jquery masonry 来布置许多 div，其中包含图像和标题。

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

【问题讨论】：

对我来说听起来像是 CSS 问题。你能展示一个你的页面的例子吗？将这些 div 设置为 overflow: hidden 怎么样？
感谢您的回复，我目前没有任何地方可以托管这些文件。但这里是元素的 CSS：#container{ max-width:1200px; margin:0 auto; text-align:center; } .item { width: 250px; margin-bottom:50px; } 和 html：<div id="container" class="js-masonry" data-masonry-options='{ "gutter": 66, "itemSelector": ".item" }'> <div class="item"><img style="width:100%" src="graphic.jpg" /></div> </div>

标签： jquery css load onload

【解决方案1】：

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

这样实现：

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

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

【讨论】：

【解决方案2】：

我必须为砌体中的每个项目应用高度：XXpx'。然后更改@mediaqueries 的高度。不完全是我所希望的，但它奏效了！不过谢谢你的想法。我可能只是实施不正确。

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

【讨论】：

对我来说，这也是缺少的高度。谢谢。

【解决方案3】：

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

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

【讨论】：

不幸的是我无法让它工作。相反，我不得不对砌体中的每个项目应用高度：XXpx'。然后更改@mediaqueries 的高度。不完全是我所希望的，但它奏效了！不过谢谢你的想法。我可能只是实施不正确。