第一次使用砖石，我似乎无法使其正常工作。当前仅显示为单列。与开发人员相比，我更像是设计师，所以很可能我缺少了一些东西。来源如下：
<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%; }
最佳答案
我和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%; }
关于jquery - 砌体仅显示单列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22342977/