同位素网格布局第一次失败

Question

第一次访问同位素网格时出错。有两个屏幕截图可供比较。

第一次（或在没有浏览器缓存的情况下访问）：

第二次访问（或简单的浏览器重新加载）：

同位素 js 初始化：

init: function() {
        // init Isotope
        var $grid = $('.grid').isotope({
          // options
          layoutMode: 'fitRows',
        });
        // filter items on button click
        $('.filter-button-group').on( 'click', 'a', function() {
          var filterValue = $(this).attr('data-filter');
          $grid.isotope({ filter: filterValue });
          $('.grid').isotope({
            hiddenStyle: {
              opacity: 0
            },
            visibleStyle: {
              opacity: 1
            }
          });
        });
      }

我在做什么wong？提前致谢

Answer 1

将您的代码放入 $(window).load():

    $(window).load(function () {
        var $grid = $('.grid').isotope({
          // options
          layoutMode: 'fitRows',
        });
        // filter items on button click
        $('.filter-button-group').on( 'click', 'a', function() {
          var filterValue = $(this).attr('data-filter');
          $grid.isotope({ filter: filterValue });
          $('.grid').isotope({
            hiddenStyle: {
              opacity: 0
            },
            visibleStyle: {
              opacity: 1
            }
          });
        });
    });

同位素网格布局第一次失败

Isotope grid layout fails first time

jquery-isotope