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

Question

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

1. 第一次（或没有浏览器缓存访问）：



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



可以在http://telmo.club/merz/

看到

Isotope js init：

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

我在做什么？提前致谢

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