Masonry仅显示单列
Masonry仅显示单列
提问于 2014-03-12 13:46:25
第一次使用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%; }回答 2
Stack Overflow用户
发布于 2014-03-18 05:29:23
我使用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%; }Stack Overflow用户
发布于 2014-03-12 13:50:53
由于包含了jQuery库，因此可以尝试使用jQuery解决方案
itemSelector: 'masonryImage'这行masonryImage需要一个点，这样它就变成了.masonryImage
var $container = $('#container');
// initialize
$container.masonry({
columnWidth: 200,
itemSelector: '.masonryImage'
});http://jsfiddle.net/AdamAzad/88tYe/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22342977
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号