jQuery的砌体几乎都是空的空间(Jquery-Masonry almost always emp

我一直很努力，但墙面不能得到，因为我想它正好工作。我使用的元素的宽度和高度而变化，但所有适合在一个网格（4种不同的尺寸，最小边距+的所有倍数）。我也计算元素的分布（最小的7，所有其他4），可以适合精确。

然而，它是罕见的，砌筑设法完全适合他们，有时还有一个潜伏在底部，有时几个都是错误的。它总是让在一个视图中，我可以看到需要什么物品被移动为它适合。

有没有一种方法，使砖石在移动元素更积极？或者它去了两次，以确保没有空的空间？

Answer 1:

你或许应该看看砌筑的“老大哥”同位素这里。提醒一下，如果有一个在一定的顺序排序或者固定在一定的顺序的元件 - 这比单个柱宽度宽 - 它们可以“块”在一个浏览器窄宽度的列。

编辑也许这拨弄解释这一点更好。如果你看看那一个和 - 而在div的观察号码 - 你看，未来砖石元素了（红色元件5）无法适应可能在白色方块，它必须拿出元件4之后; 所以它必须结束方式，即，只有三排拟合，可以得到一个白色的差距。也许你可以使用同位素的洗牌和/或重新布局的方法和牺牲订购您的元素按照严格的顺序？最好将与您的问题的jsfiddle。

<article>
  <div class="tile blue"><p>1</p></div>
  <div class="tile black"><p>2</p></div>
  <div class="tile tall yellow"><p>3</p></div>
  <div class="tile grey"><p>4</p></div>
  <div class="tile wide red"><p>5</p></div>
  <div class="tile green"><p>6</p></div>
  <div class="tile grey"><p>7</p></div>
  <div class="tile blue"><p>8</p></div>
  <div class="tile green"><p>9</p></div>
</article>

$('article').isotope({
    itemSelector : '.tile',
    masonry: {
        columnWidth: 100
    }
});

article .tile {
    display: block;
    float: left;
    box-sizing: border-box;

    width: 100px;
    height: 100px;

    font-size: 3em;
    font-weight: 700;

    padding: 0 6px;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    border:1px dotted black;
}

article .tile.wide {
    width: 200px;
}

article .tile.tall {
    height: 200px;
}

.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }