砌体为何排列成单列重叠 [英] Masonry why arranging in single column overlapping

问题描述

我正在使用附加函数将元素附加到已经初始化的砖石实例中，但是我的所有图块都被布置在单个列中，并且许多图块是重叠的.可以看到我在做什么错吗?

I am using the appended function to append elements to an already initialized masonry instance, but all of my tiles are being laid out in a single column and many are overlapping. Can you see what I am doing wrong?

function placeNewsTiles(news){ //places news tiles 
    var length = (news.data.length > 20) ? 20 : news.data.length;

    var $container = $('#news');

    var elems ="";
    for(var i = 0; i < length; i++){
        elems += '<div class="pageNewsItem" id="'+ count + i + '">\
                <div class="textWrap">\
                    <a href="' + news.data[i]._url + '">\
                    <strong>' + news.data[i]._title + '</strong>\
                    </a>\
                    <span class="source">' + news.data[i]._source + '</span>\
                </div>\
                <div class="imageWrap"></div>\
                <div class="thumbsOverlay" style="display:none">\
                    <div class="thumbs">\
                        <div>\
                            <a href="#"" class="up"><img src="../images/Thumbs-Up-2.png" /></a>\
                            <a href="#"" class="down"><img src="../images/Thumbs-Down-2.png" /></a>\
                        </div>\
                    </div>\
                </div>\
            </div>';


        getTileImage({total: news.count, i:count + "" + i, url:news.data[i]._url});
    }
    elems = $(elems);

    $('#news').append(elems).imagesLoaded(function(){
        $('#news').masonry( 'appended', elems, true );
    });

    newsPage = 0;
    count++;
    hoverTiles();
}

$(document).ready(function() {

    newClock();

    readyLogin();

    var $container = $('#news');
    //$container.imagesLoaded( function() {
      $container.masonry({itemSelector: '.pageNewsItem'});
    //});


    obtainSearchQuery();
});

推荐答案

在此行上，尝试在添加项后尝试触发layout:

On this line, try triggering layout once items are appended:

$('#news').masonry( 'appended', elems, true ).masonry('layout');

我看过带有或不带有额外的.masonry()调用的示例，但这可能有用.

I've seen examples with and without the extra .masonry() call, but it might work.

这篇关于砌体为何排列成单列重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！