第一次使用 masonry，我似乎无法让它正常工作。当前仅显示为单列。我更像是一名设计师而不是开发人员，所以我可能遗漏了一些东西。这是来源:
<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 来做我认为你真正想要它做的事情:
我将 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/