сочетая бесконечный ajaxscroll, каменную кладку, загруженные изображения и собственный скрипт

Я работаю над страницей, и у меня возникли проблемы с получением различных материалов jquery (каменная кладка с загруженными изображениями, некоторые собственные материалы и iac (http://infiniteajaxscroll.com/)) для совместной работы и нужна помощь:

so if I write it this way, everything works but not the iac: 

(function ($) {
    var $container = $('.portfolio');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.portfoliobox'
        });
    });

    var ias = $.ias({
        container: ".portfolio",
        item: ".portfoliobox",
        pagination: ".pagination",
        next: ".older a",
        delay: 1200
    });

    ias.on('render', function (items) {
        $(items).css({opacity: 0});
    });
    ias.on('rendered', function (items) { 
        msnry.appended(items);
    });

    $("dt").click(function () { 
        $(this).toggleClass("close open");
        $(this).next("dd").slideToggle("fast", function () { 
            $('.portfolio').masonry();
        });
    });
}(jQuery));

если я напишу так, ias работает, но функция щелчка не работает для перезагруженных элементов (и загруженные изображения отсутствуют ..):

(function ($) {
    var container = document.querySelector('.portfolio');
    var msnry = new Masonry(container, {
        itemSelector: '.portfoliobox',
    });
    var ias = $.ias({
        container: ".portfolio",
        item: ".portfoliobox",
        pagination: ".pagination",
        next: ".older a",
        delay: 1200
    });
    ias.on('render', function (items) {
        $(items).css({opacity: 0});
    });
    ias.on('rendered', function (items) {
        msnry.appended(items);
    });

    $("dt").click(function () {  
        $(this).toggleClass("close open");
        $(this).next("dd").slideToggle("fast", function () { 
            $('.portfolio').masonry();
        });
    });
}(jQuery));

Так что я должен собрать все это вместе.... Спасибо за совет!


jquery ajax masonry
person Micha Solarism    schedule 03.12.2014    source источник
comment
Чтобы событие click работало, вы можете использовать делегированные события.   -  person clapas    schedule 03.12.2014
comment
Помимо применения каменной кладки к загруженным изображениям (я предполагаю), есть ли какая-либо другая причина, по которой вам нужны функции с загруженными изображениями? Кирпич нормально работает без него?   -  person clapas    schedule 03.12.2014
comment
нет, кладка без него нормально не работает   -  person Micha Solarism    schedule 03.12.2014

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте этот код:

var container = document.querySelector('#selector');
var msnry = new Masonry( container, {
        itemSelector: '.selector'
});

var ias = $.ias({
  container: "#selector",
  item: ".selector-ajax",
  pagination: "#pagination",
  next: ".next a",
  delay: 1200
});

ias.on('render', function(items) {
  $(items).css({ opacity: 0 });
});

ias.on('rendered', function(items) {
  $container = $("#selector");
  $container.imagesLoaded(function(){
      var el = $(items);
      el.css('display', 'none');
      $container.append(el);
      $container.imagesLoaded(function(){
          el.css('display', 'inline');
          $container.masonry('appended', el, true);
          });
      });
});
person user5821549    schedule 21.01.2016