Question

我在一个页面上工作并遇到一些麻烦来获得一些不同的jquery东西（带有imagesloaded的砌体，一些自己的东西和iac（http://infiniteajaxscroll.com/））一起工作并需要一些帮助：

所以，如果我这样写，一切都有效，但不是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));

所以我必须把它们放在一起....感谢您的建议！

Answer 1

试试这段代码：

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);
          });
      });
});

结合infiniteajaxscroll，masonry，imagesloaded和自己的脚本

1 个答案: