通过 AJAX 获取新图像时 WOOKMARK 刷新过滤器

Question

我正在使用 WookMark 创建一个带有类别过滤器和 ajax 无限滚动的画廊。一切似乎都工作正常，但是当通过 ajax 加载新项目时，它们不会添加到过滤器中..

你可以看看here.

我的JS代码给定了

jQuery(document).ready(function($) {

    // GET THE WINDOW WIDTH
    function getWindowWidth() {
      return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    }

    // Initialize lightbox
    $('#container').magnificPopup({
      delegate: 'li:not(.inactive) a',
      type: 'image',
      gallery: {
        enabled: true
      }
    });

    // Instantiate wookmark after all images have been loaded
    var wookmark,
        container = '#container',
        $container = $(container),
        $window = $(window),
        $document = $(document);

    // init wookmark
    imagesLoaded('#container', function() {
      wookmark = new Wookmark('#container', {
        itemWidth: 300, // Optional min width of a grid item
        outerOffset: 0, // Optional the distance from grid to parent
        flexibleWidth: function () {
          // Return a maximum width depending on the viewport
          return getWindowWidth() < 1024 ? '100%' : '50%';
        }
      });
    });

    // INFINITE SCROLL
    // AJAX LOAD MORE
    $('#main').append( '<span class="load-more"></span>' );
    var button = $('#main .load-more');
    var page = 2;
    var loading = false;
    var scrollHandling = {
        allow: true,
        reallow: function() {
            scrollHandling.allow = true;
        },
        delay: 400 //(milliseconds) adjust to the highest acceptable value
    };

    // Load more items on scroll
    $(window).scroll(function(){
      if( ! loading && scrollHandling.allow ) {

        scrollHandling.allow = false;
        setTimeout(scrollHandling.reallow, scrollHandling.delay);
        var offset = $(button).offset().top - $(window).scrollTop();

        if( 2000 > offset ) {
          console.log('Added more items');
          // Get Next Page Posts AJAX
          loading = true;
          var data = {
            action: 'be_ajax_load_more',
            nonce: beloadmore.nonce,
            page: page,
            query: beloadmore.query,
          };
          $.post(beloadmore.url, data, function(res) {
            if( res.success) {
              // Get the first then items from the grid, clone them, and add them to the bottom of the grid
              var $items = $(res.data, $container);
              $container.append($items);

              wookmark.initItems();
              wookmark.layout(true, function () {
                // Fade in items after layout
                setTimeout(function() {
                  $items.css('opacity', 1);
                }, 300);
              });

              $('#main').append( button );
              page = page + 1;
              loading = false;
            } else {
              // console.log(res);
            }
          }).fail(function(xhr, textStatus, e) {
            // console.log(xhr.responseText);
          });
        }
      }
    });

    // Setup filter buttons when jQuery is available
    var $filters = $('#filters li');

    /**
     * When a filter is clicked, toggle it's active state and refresh.
     */
    var onClickFilter = function(event) {
      updateFilterClasses();
      var $item = $(event.currentTarget),
          itemActive = $item.hasClass('active');

      if (!itemActive) {
        $filters.removeClass('active');
        itemActive = true;
      } else {
        itemActive = false;
      }
      $item.toggleClass('active');

      // Filter by the currently selected filter
      wookmark.filter(itemActive ? [$item.data('filter')] : []);
    }

    // Capture filter click events.
    $('#filters').on('click.wookmark-filter', 'li', onClickFilter);

});

Answer 1

好的，我在 Wookmark 文档中跟踪了解决方案..

当我通过 ajax 加载新项目时，我必须更新过滤器类。所以我只是在 ajax 成功时添加了 wookmark.updateFilterClasses();。如果有人需要，下面是工作代码。

jQuery(document).ready(function($) {

    function getWindowWidth() {
      return Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    }

     // Init lightbox
    $('#container').magnificPopup({
      delegate: 'li:not(.inactive) a',
      type: 'image',
      gallery: {
        enabled: true
      }
    });

    // Instantiate wookmark after all images have been loaded
    var wookmark,
        container = '#container',
        $container = $(container),
        $window = $(window),
        $document = $(document);

    imagesLoaded('#container', function() {
      wookmark = new Wookmark('#container', {
        itemWidth: 300, // Optional min width of a grid item
        outerOffset: 0, // Optional the distance from grid to parent
        flexibleWidth: function () {
          // Return a maximum width depending on the viewport
          return getWindowWidth() < 1024 ? '100%' : '50%';
        }
      });
    });

    $('#main').append( '<span class="load-more"></span>' );
    var button = $('#main .load-more');
    var page = 2;
    var loading = false;
    var scrollHandling = {
        allow: true,
        reallow: function() {
            scrollHandling.allow = true;
        },
        delay: 400 //(milliseconds) adjust to the highest acceptable value
    };

    $(window).scroll(function(){
      if( ! loading && scrollHandling.allow ) {

        scrollHandling.allow = false;
        setTimeout(scrollHandling.reallow, scrollHandling.delay);
        var offset = $(button).offset().top - $(window).scrollTop();

        if( 2000 > offset ) {
          console.log('Added more items');
          // Get Next Page Posts AJAX
          loading = true;
          var data = {
            // Function which grabs next 10 posts available
            action: 'be_ajax_load_more',
            nonce: beloadmore.nonce,
            page: page,
            query: beloadmore.query,
          };
          $.post(beloadmore.url, data, function(res) {
            if( res.success) {
              // Get the first then items from the grid, clone them, and add them to the bottom of the grid
              var $items = $(res.data, $container);
              $container.append($items);

              wookmark.initItems();
              wookmark.updateFilterClasses();
              wookmark.layout(true, function () {
                // Fade in items after layout
                setTimeout(function() {
                  $items.css('opacity', 1);
                }, 300);
              });

              $('#main').append( button );
              page = page + 1;
              loading = false;
            } else {
              // console.log(res);
            }
          }).fail(function(xhr, textStatus, e) {
            // console.log(xhr.responseText);
          });
        }
      }
    });

    // Setup filter buttons when jQuery is available
    var $filters = $('#filters li');

    /**
     * When a filter is clicked, toggle it's active state and refresh.
     */
    var onClickFilter = function(event) {
      var $item = $(event.currentTarget),
          itemActive = $item.hasClass('active');
      console.log(itemActive);

      if (!itemActive) {
        $filters.removeClass('active');
        itemActive = true;
      } else {
        itemActive = false;
      }
      $item.toggleClass('active');

      // Filter by the currently selected filter
      wookmark.filter(itemActive ? [$item.data('filter')] : []);
    }

    // Capture filter click events.
    $('#filters').on('click.wookmrk-filter', 'li', onClickFilter);

});

通过 AJAX 获取新图像时 WOOKMARK 刷新过滤器

WOOKMARK Refresh Filter when new images are fetched via AJAX

javascript

jquery

ajax

infinite-scroll

wookmark