Question

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

以下是相关代码：

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图像的网格，但如果有使用不同高度的解决方案，我宁愿使用它。

Answer 1

对我来说，就像Masonry甚至不会在您的网络浏览器中控制台上的任何错误一样？你在jQuery加载后确定加载了Masonry插件，你是否正在使用jQuery？

Masonry + Bootstrap 3垂直对齐问题

1 个答案: