Question

加载页面时，同位素无法启动。

我尝试使用同位素（来自isotope.metafizzy.co）和过滤按钮。

这是我的HTML和JS代码：

<div class="scroll-pane">   
    <div id="container" class="isotope">
         <div class="isotope-item box-item size1 group1"> 
             <img width="190" height="130" src="..." class="wp-post-image" />
             <a href="..." class="projDescription">Some text here</a>
          </div>    
         <div class="isotope-item box-item size1 group1 group2"> ... </div> 
         <div class="isotope-item box-item size3 group1"> ... </div>    
         ..
   </div>
</div>

<ul id="filters">
    <li><a href="#" data-filter="*" class="selected">Show all</a></li>
    <li><a href="#" data-filter=".group1">Kategorija1</a></li>
    <li><a href="#" data-filter=".group2">Kategorija2</a></li>
    <li><a href="#" data-filter=".group3">Kategorija3</a></li>
</ul>

JS：

jQuery(window).load(function(){
    jQuery('#isotope_content').isotope({        
      layoutMode: 'masonryHorizontal',
        masonryHorizontal: {
            rowHeight: 132
        }
    });
    jQuery("ul#filters li a").click(function() {
      jQuery("ul#filters li a").not(this).removeClass("selected");
      jQuery(this).toggleClass("selected");
    });

    jQuery(".box-item").hover(function(){
        jQuery(this).children(".projDescription").stop().fadeTo(350,0.9)},
        function(){
            jQuery(this).children(".projDescription").stop().fadeTo(350,0)
        }
    );

    jQuery('#filters a').click(function(){
      var selector = jQuery(this).attr('data-filter');
      jQuery('#container').isotope({ 
        filter: selector 
      });
      return false;
    });    
});

问题是当页面第一次加载时，同位素不起作用，图像没有任何反应。如果我按任何过滤按钮（全部显示或任何其他按钮），那么它可以正常工作。

我无法用JsFiddle重现这个问题。只有这样才能在网上看到它 - http://dev.metolat.lv/

网站加载没有同位素功能，但在按下“全部显示”后，它按预期重新排序图像。

只是一个注释 - 我正在使用Wordpress创建此页面，但我不使用任何同位素插件，而是直接包含它。

我相信这可能是脚本和图片加载顺序，但我无法解决这个问题。

Answer 1

从我看到的内容中，没有{id}为isotope_content的元素在初始化时输入同位素。但是，您在过滤器点击处理程序中使用了div content - 它可以正常工作。因此，将isotope_content更改为content，它应该有效。

顺便说一句。 load是（ 1.8 ）中不推荐使用的jQuery方法。如果您有图像问题，您还可以查看同位素作者的另一个名为imagesLoaded的插件（它应该与同位素捆绑在一起）。

jquery同位素在过滤器按钮没有被按下之前不工作

1 个答案: