Javascript 一次通过Pinterest样式的列？

我有一个图像数组，我想对它迭代一次以显示3列。理想情况下，我希望在每个元素上都有一个引导col-xs-4样式，以便将列包装到下一列或下一行。。。但这种方法并不正确

如果我有5张不同高度的图片，前3张效果很好。。。在图4中，我有一个垂直间距问题。你可以明白我在这里的意思-

我能纠正这个吗？如果我将数组重新构造为3，我可以将每个图像逐列地放在col-xs-4组中，并且没有垂直空格，但这是低效的

换句话说

<div class="row">

<div class="col-xs-4">
//for-loop here
</div>

<div class="col-xs-4">
//for-loop here
</div>

<div class="col-xs-4">
//for-loop here
</div>

</div> <!-- row -->

---

上面的方法很好，但是效率很低，因为我必须切片我的数组。。。很多我试图优化代码，使其不必这样做。

如果线性排序不是显示的重要部分，您可以简单地使用CSS列。这就是pinterest工作的原因：没有日期意味着css排序的列不会像堆栈或其他耗时的列表那样迷失方向。也可以查看同位素.js。线性排序是显示的最重要部分。否则，这就很难实现了。也许你想签出？除此之外，还需要使用JavaScript。为了使用大量的数据来实现这一点，我们编写了一些库，如Mashise。