JQuery кладка и бесконечная прокрутка prblem - PullRequest
Новая
       27

JQuery кладка и бесконечная прокрутка prblem

0 голосов
/ 07 января 2012 
<script>
$(window).load(function () {
    var $wall = $('#content');
    $wall.imagesLoaded(function () {
        $wall.masonry({
            itemSelector: '.oddpost',
        isAnimated: true
    });
    $(".oddpost").each (function (idx, el) {   
     if ($(el).position().left < $(el).width()) {
      $('.rightarrow', el).show();
     }
     else {
      $('.leftarrow', el).show();
     }
 });
});

$wall.infinitescroll({
    navSelector: '#pagination',
    nextSelector: '#pagination li a.pagination_nextlink',
    itemSelector: '.oddpost',
    loadingImg: "http://static.tumblr.com/qrevc1p/WTKlx2dsg/gsnjnwui-um.gif",
    loadingText: " ",
    donetext: " ",
    bufferPx: 100,
    debug: false,
    errorCallback: function () {
        $('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
}, function (newElements) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.imagesLoaded(function () {
        $wall.masonry('appended', $newElems, {
            isAnimated: true,
            animationOptions: {
                duration: 900,
                easing: 'linear',
                queue: false
            }
        }, function () {
            $newElems.fadeIn('slow');    
        });
    });
  });
$('#content').show(500);
  });
  </script>

Я использую этот сценарий в теме Tumblr, над которой я работаю, чтобы применить к нему кладку и бесконечную прокрутку. Это макет из двух столбцов, поэтому div-ы идут только влево или вправо. И помимо применения кладки к теме, он также помещает стрелку (.rightarrow) в div, которая идет влево, и другую стрелку (.left arrow) для тех, что идет вправо.

Пока все это работает нормально. Моя проблема начинается, когда следующая страница загружена. Очевидно, коды стрелок применяются только на первой странице, но не на вновь добавленных элементах. Я пробовал перебирать коды стрелок в разных частях кодов, но мне не повезло. Это действительно начинает смущать меня. Я не новичок в jQuery, но мне действительно трудно сделать эту работу.

Кто-нибудь может сказать мне, в какую часть я должен поместить коды стрелок, чтобы это также относилось к вновь добавленным элементам div?

1 Ответ

1 голос
/ 07 января 2012

Вам нужно запустить код, который показывает стрелки после их добавления на страницу.

Я рекомендую использовать функцию, чтобы избежать копирования / вставки. 

/**
 * Shows the appropiate arrow for a given element.
 */
function showArrowOn(el) {
  if ($(el).position().left < $(el).width()) {
    $('.rightarrow', el).show();
  } else {
    $('.leftarrow', el).show();
  }
}

$(window).load(function () {
  ...
  $(".oddpost").each(function (idx, el) { 
     // Using function to show the arrows on the items at window load.
     showArrowOn(el); 
  }
}

$wall.infinitescroll({
  ...
  $newElems.imagesLoaded(function () {
    $wall.masonry('appended', $newElems, {
      ...
      }, function () { 
        // Show the arrows once the new elems are appended.
        $newElems
          .fadeIn('slow')
          .each(function () { showArrowOn(this); });
      });

});

Выу вас могут возникнуть проблемы с логикой отображения стрелок на новых элементах, потому что они не видны, когда вы спрашиваете jQuery об их положении и ширине (зависит от вашего CSS), если у вас возникли проблемы, попробуйте следующее: 

$newElems.fadeIn('slow', function () { showArrowOn(this); });

Чтобы вычислить стрелку, отображаемую после того, как элемент виден.

...