Масонство и бесконечный свиток ломают раскладку при прокрутке с определенной скоростью - PullRequest
Новая
       25

Масонство и бесконечный свиток ломают раскладку при прокрутке с определенной скоростью

4 голосов
/ 28 января 2011

У меня тема жидкой ширины, и я использую jQuery Masonry и Infinite Scroll.Проблема в том, что если вы прокручиваете страницу с определенной скоростью (не слишком быстрой и не слишком медленной), это может привести к разрыву сетки.Я видел это только в двух столбцах и в Firefox:

screen layout

Кто-нибудь знает, почему это происходит?Я знаю, что это может быть несколько вещей, но если кто-то имеет опыт работы с этим и знает, что происходит, это очень поможет.

ОБНОВЛЕНИЕ: Перерыв происходит сразу после последнего сообщения на странице.Те, что следуют, генерируются обратным вызовом бесконечной прокрутки.

Ответы [ 2 ]

2 голосов
/ 13 ноября 2011

Ну, я не вижу ссылки на вашу страницу, чтобы посмотреть (и изображение недоступно), но из моего прошлого опыта с каменной кладкой, когда есть значительные изменения в размере страницы (изменение размера, прокрутка изменить размер div), вам нужно вызвать его снова: 

jQuery(document).ready(function() {
    jQuery("#somediv").click(function() {
        jQuery('#leftcol').toggle(700); //div resizing start here
        jQuery('#somediv2').toggleClass("minside");
        jQuery('#somediv').toggleClass("full"); // evoke again after change..
        jQuery('#container').masonry({
            itemSelector : '.item',
            columnWidth : 240
        });
    });
});
0 голосов
/ 01 июня 2012

Добавьте это как обратный вызов для бесконечных свитков, и ваша проблема исчезнет ... по крайней мере, у меня работает: 

// trigger Masonry as a callback
function (newElements) {
    // hide new items while they are loading
    var $newElems = $(newElements).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function () {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry('appended', $newElems, true);
    });

});

Проверьте $container на случай, если вы его изменили.

...