砌体只显示单列答案

【问题标题】：Masonry only show single column砌体只显示单列
【发布时间】：2014-03-12 05:46:24
【问题描述】：

第一次使用砖石，我似乎无法让它正常工作。目前仅显示为单列。我更像是一个设计师而不是一个开发者，所以我很可能错过了一些东西。以下是出处：

    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
<div id="container">
    <div class="masonryImage">
        <img src="img/masonry_001.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_002.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_003.jpg">
    </div>

    <div class="masonryImage">
        <img src="img/masonry_004.jpg">
    </div>

    <div class="masonryImage">
        <img src="img/masonry_001.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_002.jpg">
    </div>
         
    <div class="masonryImage">
        <img src="img/masonry_003.jpg">
    </div>

    <div class="masonryImage">
        <img src="img/masonry_004.jpg">
    </div>
     
</div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/masonry.pkgd.min.js"></script>

        <script>
  $(function(){

    var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  itemSelector: 'masonryImage'
});
  });
</script>

    </body>

这里是 CSS：

#container {
    width: 1200px;
    margin: 0 auto;
}

.masonryImage { width: 25%; }

【问题讨论】：

标签： jquery css grid jquery-masonry

【解决方案1】：

我使用 JSFiddle 来做我认为你真正想要它做的事情：

http://jsfiddle.net/88tYe/5/

我将 div 设置为百分比宽度，并让 div 内的图像为 100%（您没有真正指定是否需要排水沟，所以我省略了）

代码很简单：

var $container = $('#container');
// initialize
$container.masonry({
   itemSelector: '.masonryImage'
});

还有CSS

#container { width:1200px }
.masonryImage { width: 25%; }
.masonryImage img { width:100%; }

【讨论】：

我为您的解决方案投了票，因为您给了我一个好主意……对我来说，砌体也只制作了一列而不是三列，我还希望图像大小以百分比表示。我做了所有像砖石在他们的网站上解释的事情，但他们把事情复杂化了。根据他们的解释，您必须为图像大小提供额外的 sizer 元素。我只是简单地删除了 sizer 并直接在图像 css 中应用了 30% 的图像大小，它工作得很好......就像你的例子一样简单！

【解决方案2】：

既然你包含了 jQuery 库，你可以试试 jQuery 解决方案

itemSelector: 'masonryImage'

那行masonryImage 需要一个点，所以它变成.masonryImage

var $container = $('#container');
// initialize
$container.masonry({
  columnWidth: 200,
  itemSelector: '.masonryImage'
});

http://jsfiddle.net/AdamAzad/88tYe/

【讨论】：