javascript - masonry 有时排成一列直线

Question

我在一些包含图像的“图 block ”上初始化了 masonry 。大多数时候我没有遇到问题，但有时瓷砖会排成一列，而实际上应该有 3 列。您知道问题可能是什么吗？

准备初始化时:

$(document).ready(function() {


    var $container = $('#news');
      $container.masonry({
        itemSelector: '.pageNewsItem',
        transitionDuration: 0
    });

    $container.masonry( 'on', 'layoutComplete', function( msnryInstance, laidOutItems ) {debounced = true;} )

});

动态附加图 block :

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

    var elems ="";
    for(var i = 0; i < length; i++){
        elems += '<div class="pageNewsItem inactive" id="'+ count + i + '">\
                <div class="outerTextWrap">\
                    <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>\
                <div class="imageWrap"></div>\
                <div class="thumbsOverlay" style="display:none">\
                    <div class="thumbs">\
                        <div>\
                            <a href="#" class="up"></a>\
                            <a href="#" class="down"></a>\
                        </div>\
                    </div>\
                    <div class="title">\
                        <div>\
                            <a href="' + news.data[i]._url + '">\
                                <div class="theTitle">Read Article</div>\
                            </a>\
                        </div>\
                    </div>\
                </div>\
            </div>';

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

    $('#news').append(elems).imagesLoaded(function(){
        //for(var i = 0; i < length; i++) $('.pageNewsItem').removeClass('inactive'); //$('.pageNewsItem').show(1000);
        $('#news').masonry( 'appended', elems);
    });

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

调用getTileImage函数进行ajax调用获取瓦片图像。砖石布局完成后发生:

var cnt = 0;
function getTileImage(args){
    var _t = localStorage.getItem("token"),
        url = args.url,
        i = args.i;

    $.ajax({
            type: "GET",
            url: apiHost+'/api/tileImg?url=' + url + '&token='+_t,
            dataType: "json",
            success: function(data) {
                var img = (data && data.image.src) ? data.img.src : (data && data.image) ? data.image: "";

                if(img.indexOf("spacer") > -1|| img.indexOf("blank") > -1 || img === ""){ $('.pageNewsItem#' + i).hide(); }
                else $('.pageNewsItem#' + i).find('.imageWrap').append('<img src="' + img + '" />');


            },
            error: function(e) {
              if (e.status == 404) {
                //need to get a new token
                getToken(getTileImage, url);
              }
            }, complete: function(){
                cnt++;
                if ((cnt ==20) || cnt == args.total) {
                    var $container = $('#news');
                        $container.imagesLoaded( function() {
                          $container.masonry( 'layout' );
                          $('.pageNewsItem').removeClass('inactive');
                          //$('.pageNewsItem').show();
                        });
                    cnt = 0;
                }

                /*$('#news').imagesLoaded( function() {
                  $('.pageNewsItem#' + i + ' .thumbs').height($('.pageNewsItem#' + i).outerHeight() - $('.pageNewsItem#' + i + ' .title').height() - 5);
                  //$('.pageNewsItem').show();
                });*/

            }
        });//end ajax call
}

CSS:

.pageNewsItem {
width: 33.333%;
padding: 10px;
min-height: 150px;
opacity: 1;
transition: opacity 1s ease;
}

#news {
margin-right: 20px;
margin-top: 25px;
}

Answer 1

尝试使用控制台并手动初始化 masonry :

$('#news').masonry();

如果它不起作用， masonry 可能已经初始化，因此它不会重新定位元素。在这种情况下，您必须从 div 中删除 masonry 并重新初始化它:

$('#news').masonry('destroy');
$('#news').masonry();