我创建了以下CodePen:http://codepen.io/anon/pen/wmjHy
这个想法是要有一个两列砌砖的箱子,它们之间应该有20px的间距。我已将box-sizing
设置为border-box
,以忽略每个项目的边框和内部填充。
然而,第二列在第一列下崩溃...大概是因为50%
和20px在BOTH框(左和右)上添加了它。
有关如何解决此问题的任何想法?
我看过或许在做:
'columnWidth': $('.masonry').width() / 2
并在CSS中将.item
设置为100%
但这似乎也不起作用......也许是因为排水沟也附加到右侧列框?
JS:
$(document).ready(function(){
$('.masonry').masonry({
'itemSelector': '.item',
'gutter': 20
});
});
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
padding: 20px;
}
.masonry {
background: #ff0000;
}
.masonry .item {
width: 50%;
height: 100px;
float: left;
background: #eeeeee;
border: 1px solid #333;
margin-bottom: 20px;
}
HTML:
<div class="masonry">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
答案 0 :(得分:3)
如果您将以下内容添加到$(document).ready
$(window).on("resize load", function() {
var desired_width = $(".masonry").width()/2 - 10
$('.masonry .item').css("width", desired_width)
})
它应该给出你想要的结果。
答案 1 :(得分:2)
我创建了一个双柱砌体的解决方案,排水沟为30px。它仍会将其附加到两列,但在网格元素上添加similarity.sort(key=lambda x: x[1].any(), reverse=True)
可以隐藏不需要的右侧排水沟。
Codepen:within a file