同位素容器 - 单击时显示

Question

我正在使用同位素创建过滤功能。但是整个同位素容器需要在初始页面加载时隐藏，访问者必须单击按钮才能显示容器。

我的过滤器可以正常工作，但是当你点击按钮时，第一次加载容器时，所有项目都在彼此之上，然后当你点击其中一个过滤器时，一切都就位了.

你可以在这里看到我的代码 - http://chrsdev.com/test.html

如何解决初始内容加载时所有项目相互重叠的问题？

如果有人能指出正确的方向，我将不胜感激。

Answer 1

下载 imagesloaded.js 并将脚本添加到您的页面。（卸载的图像可能会影响同位素布局并导致项目元素重叠。imagesLoaded 解决了这个问题）

然后这样调用同位素：

//Initialize isotope on each container
    jQuery.each($container, function (j) {
     this.imagesLoaded( function() {
        this.isotope({
            itemSelector : '.element-item'
        });
   });
    });

附录

问题出在您的每个函数和 "this" 上。试试这个。

  //Initialize isotope on each container
    jQuery.each($container, function (j) {
     $container.imagesLoaded( function() {
        $container.isotope({
            itemSelector : '.element-item'
        });
   });
    });

同位素容器 - 单击时显示

isotope container - show on click

javascript

jquery

html

jquery-isotope