Question

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

    <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%; }

Answer 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%; }

Answer 2

由于您包含了jQuery库，因此您可以尝试使用jQuery解决方案

itemSelector: 'masonryImage'

该行masonryImage需要一个点，因此它变为.masonryImage

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

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

砌体只显示单列

2 个答案: