Masonry + Bootstrap 3 垂直对齐问题答案

【问题标题】：Masonry + Bootstrap 3 vertical alignment issuesMasonry + Bootstrap 3 垂直对齐问题
【发布时间】：2014-07-16 22:30:21
【问题描述】：

我正在尝试使用 bootrstrap 3.2 + Masonry 3.1.5 制作一些图片库，但我的布局浪费了很多空间，我的英语不太流利，所以我上传了几张图片作为示例。

current layout

desired layout

以下是相关代码：

HTML：

<div class="container"> <!-- gallery -->
    <div class="masonry"></div>
</div>

JS：

$(document).ready(function(){
    loadImages();
    var $container = $('.masonry');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post-box',
            columnWidth: '.post-box',
            transitionDuration: 0
        });
    });
});

function loadImages() {
    $.ajax({
        type: 'GET',
        url: 'ajax/getImages',
            dataType: 'json',
            success : function(data) {
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += '<div class="post-box col-lg-3 col-md-3 col-sm-3"><img class="img-responsive img-thumbnail"'
                          + ' src="'+data[i].src+'"></div>';
                };
                $('.masonry').html(html);
            },
            error: function(jqXHR, status, e) {
                console.log(status, e);
            }
        });
}

CSS：

.masonry {
    margin-top: 20px;
}

.img-thumbnail {
    padding: 10px;
}
.post-box {
    margin: 0 !important;
    padding: 5px !important;
}

我可以制作图像的方形缩略图并制作 200x200 图像的网格，但如果有使用不同高度的解决方案，我宁愿使用它。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 jquery-masonry

【解决方案1】：

在我看来，Masonry 甚至没有开火，您的 Web 浏览器中的控制台是否有任何错误？从外观上看，您使用的是 jQuery，您确定在加载 jQuery 之后加载 Masonry 插件吗？

【讨论】：

没有任何错误，jQuery 是第一个加载的脚本。我放弃了通过 ajax 调用加载图像，问题就解决了。现在我想起来了，问题可能是在 ajax 响应到达之前执行了 Masonry 调用，并且在那一刻该 div 上没有任何图像。
您还可以查看 Desandro（砌砖的那个人）imagesloaded.desandro.comimagesLoaded 的另一个插件 - 不确定它是否会有所帮助，但它可能会有所帮助。