jQuery Waypoints + Masonry - PullRequest
Новая
       13

jQuery Waypoints + Masonry

1 голос
/ 17 сентября 2011

Использование: jQuery Waypoints и Masonry для создания бесконечной сетки с прокруткой.Кроме того, они работают нормально.Однако я не могу понять, как заставить их работать вместе.

Код для путевых точек 

$(document).ready(function() {
var $loading = $(""),
$footer = $('footer'),
opts = {
    offset: '100%',
    continuous: 'true'
};


$footer.waypoint(function(event, direction) {
    $footer.waypoint('remove');
    $('body').append($loading);
    $.get($('.more a').attr('href'), function(data) {
        var $data = $(data);
        $('#containerd').append($data.find('.poster3'));
        $('.more').replaceWith($data.find('.more'));
        $footer.waypoint(opts);
    });
}, opts);
});

Код для масонства (обновлено для анимации 18.09.2011) 

var $j = jQuery.noConflict();
$j(function(){
$j('#mason3').masonry({
itemSelector: '.poster3',
isAnimated: !Modernizr.csstransitions
});  
});

Я смотрел на пример Masonry Infinite Scroll, но не могу заставить Infinite Scroll работать на моей странице (именно поэтому я и использовал Waypoints для начала).

Проблема в том, что когда div загружаются с путевыми точками, они не выстраиваются должным образом в сетку через масонство.Вдобавок ко всему, любые теги rel = отменяются на загруженных объектах (также используя скрипт всплывающих подсказок для создания всплывающих подсказок в формате html).

Итак, в основном, что я собираюсь сделать: [1] когдаdiv загружаются через путевые точки, обновляют компоновку сетки с новыми загруженными путевыми точками div , в то время как сохраняя любые данные из указанных div без изменений (стреляя правильно), как и вышеупомянутая проблема с всплывающими подсказками.Пример проблемы можно увидеть из первых рук в http://regchan.org/ib/dev/. (страница настроена на первоначальную загрузку 4 делений, которые являются первыми 4, а затем загрузку 4 со следующих страниц (если применимо) до тех пор, пока больше не будет доступно.)

.poster3 - это класс div, содержащий изображения, #mason - селекторный div, окружающий динамически создаваемый контент.

EDIT Посмотрите набесконечный код прокрутки с сайта Masonry, и что-то сшитое вместе (хотя это не захватывает данные): 

var $j = jQuery.noConflict();
$j(function(){
var $jcontainer = $j('#mason');
$jcontainer.imagesLoaded(function(){
$jcontainer.masonry({
itemSelector: '.poster3',
});
});
(function() {
var $jloading = $j(""),
$jfooter = $j('footer'),
opts = {
offset: '100%',
continuous: 'true'
};
$jfooter.waypoint(function(event, direction) {
$jfooter.waypoint('remove');
$j('body').append($jloading);
$j.get($j('.more a').attr('href'), function(data) {
var $jdata = $j(data);
$j('#containerd').append($jdata.find('.poster3'));
$j('.more').replaceWith($jdata.find('.more'));
$jfooter.waypoint(opts);
});
}, opts)});
// trigger Masonry as a callback
function( newElements ) {
var $jnewElems = $j( newElements );
// ensure that images load before adding to masonry layout
$jnewElems.imagesLoaded(function(){
$jcontainer.masonry( 'appended', $jnewElems, true ); 
});
}
}
);

Firebug не выдает никаких ошибок для этого.

1 Ответ

1 голос
/ 25 июня 2014

Вот очень простое, но комплексное решение для их объединения без каких-либо затруднений: 

<script src="js/vendor/masonry.pkgd.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-infinite.js"></script>

<script>
        $(window).load(function() {
            var container = $('.infinite-container');
            container.masonry({
                itemSelector: '.box'
            });
            $('.infinite-container').waypoint('infinite', {
                container: 'auto',
                items: '.box',
                more: '.infinite-more-link',
                offset: 'bottom-in-view',
                loadingClass: 'infinite-loading',
                onBeforePageLoad: $.noop,
                onAfterPageLoad: function() {
                    $(container).masonry('reloadItems');
                    $(container).masonry('layout')
                }
            });
        });
</script>
...