带有引导程序的缩略图网格答案

【问题标题】：Thumbnail grid with bootstrap带有引导程序的缩略图网格
【发布时间】：2015-11-02 19:07:21
【问题描述】：

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

【问题讨论】：

您是否尝试过调整图像的高度和宽度？你可以很容易地根据原始的高度/宽度比计算出所需的宽度。
@JohnBarton 我已经在调整图像的最大边为 100px 的图像大小。但比例不同。

标签： html css twitter-bootstrap knockout.js

【解决方案1】：

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

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

【讨论】：

我需要水平行和垂直列对齐的图像。似乎 Gridalicious 只对齐列。
哦，那也许这就是你要找的东西？ brm.io/jquery-match-height

【解决方案2】：

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

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

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

【讨论】：