Question

我正在尝试使用bin包装算法（如packery或masonry）在网格中进行很好的项目布局。我已经安装了同位素，因此将使用packery插件。

如果你看一下这里的例子http://codepen.io/desandro/pen/vdwmb，这正是我需要的东西，但我认为我要面对的问题是这些项目的内容是通过CMS进行的。< / p>

<h1>Isotope - packery layout mode</h1>

<div class="grid">
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #DDD;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }

$('.grid').isotope({
  layoutMode: 'packery',
  itemSelector: '.grid-item'
});

可能更多是一个数学问题，但我假设打包工作的项目都必须是相互之间的大小，即在上面的例子中，所有项目都是最小项目的倍数。

这个假设是否正确，还有什么我需要考虑的吗？

同位素包装布局理想项目大小

0 个答案: