带引导程序的缩略图网格

Question

我正在尝试使用bootstrap和knockout使用缩略图制作负责任的网格。目前我有下一个HTML：

<div class="row">
    <!-- ko if: toys().length == 0 -->
    <div>No toys in category</div>
    <!-- /ko -->
    <!-- ko foreach: toys-->
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 previewGridItem">
        <a class="thumbnail" data-bind="attr: { href: '#!/toy/' + id }">
            <img data-bind="attr: {src: images[0] ? images[0] : '/Content/img/NoImage.jpg' }" />
            <span data-bind="text: name"></span>
        </a>
    </div>
    <!-- /ko -->
</div>

有时我会得到正确的网格。但在大多数情况下（当然取决于图像的大小和项目名称的长度）我有这样的东西：

如何正确对齐项目？最简单的答案是将图像的高度设置为常数，但随后图像的比例会被破坏。更重要的是，我希望图像调整大小，包括高度。每个图像的文本限制为2行。

现场演示：JSFiddle

Answer 1

我建议你看看 Gridalicious 插件 - 它是为这种情况创建的。它也非常快，可以通过内置的可配置参数轻松调整以满足您的需求，并根据您的需要简单地编辑未压缩的插件版本。

http://suprb.com/apps/gridalicious/

Answer 2

目前，我使用comment by Artanis中提到的jQuery插件解决了问题。我还必须使用插件imagesLoaded因为我有一个加载图像的ajax调用。结果我写了下一个代码：

window.imagesLoaded(".previewGridItem", function(instance) {
    $(".previewGridItem").matchHeight();
});

我不认为它是最好的解决方案，因为现在我只有40kb（12Kb最小化）库才能对齐图像。但是现在我只能用css找到解决方案。