0

当我加载我的页面时，同位素不会启动。

我尝试使用带有过滤按钮的同位素（来自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 创建此页面，但我没有使用任何同位素插件，而是直接包含它。

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

4

1 回答 1

0

据我所见，isotope_content在初始化时没有将其提供给同位素的元素。但是，您在过滤器单击处理程序中使用了一个 div content- 它可以工作。所以更改isotope_content为content它应该可以工作。

顺便提一句。从 ( 1.8 )load开始，它是一个已弃用的 jQuery 方法。如果您遇到图像问题，您还可以查看同位素作者的另一个名为imagesLoaded的插件（无论如何它应该与同位素捆绑在一起）。

于 2013-08-16T15:20:24.317 回答