带引导的缩略图网格

Question

我正在尝试使用引导程序和剔除程序使带有缩略图的负责任网格。 目前，我有下一个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

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

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

我认为这不是最好的解决方案，因为现在我有40kb（最小化12Kb）的库仅用于对齐图像。 但是现在我无法仅使用CSS找到解决方案。