两个柱砌体与单排水沟

时间:2013-08-15 14:57:42

标签: jquery css jquery-masonry

我创建了以下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>

2 个答案:

答案 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