帶引導的縮略圖網格

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找到解決方案。