Javascript 同位素伸缩特性

我正在研究一种同位素——我希望随着窗格的展开和打开，它尽可能接近麦当劳的例子

我有一个设置高度/宽度的类

$(".element-item").on("click", function() {
                that.highlightBlock($(this));

                $("#filter").click();
            });

---

您已经掌握了基本知识-通过CSS类

open

设置“扩展”/“打开”同位素元素的宽度和高度

<li class="product open">

但是仅仅放大缩略图像的尺寸看起来不太好：在向同位素元素添加

open

之前，我们将缩略图像的

src

-属性替换为产品图像的更大版本的URL。后者存储在图像的

数据src large

-属性中：

<img class="product-image" data-src-large="product_preview.png" src="product_thumbnail.png" data-src-standard="product_thumbnail.png">

基于该类别，所有未分配

打开

类别的同位素项目的不透明度都会降低，同样通过CSS：

.item-open .product {
    opacity: 0.15;
}

.item-open .product.open {
    opacity: 1;
}

您可以在这里看到与上面的代码片段相匹配的代码笔：（使用同位素v1）和（使用同位素v2）-两者的边缘都有点粗糙，但使用的是最新的Chrome

请注意，我使用spin.js来显示加载指示器，稍微更改了CSS类名，并省略了一系列标记、供应商前缀和IE特定的过滤器，这与原来的麦当劳产品页面不同，以使内容更容易掌握（希望如此），其他内容几乎都是1:1的副本

另外请注意，附带的imagesLoaded插件有其自身的功能，如果您想使用它来确定何时加载高分辨率产品图像，则最好使用current

JSFIDLE JavaScript包含一些注释以帮助您解决问题。
我希望结合这里的答案，这会给你一些建议，告诉你如何从现在的位置继续前进

<ul id="isotope" class="isotope item-open">
    <li class="product open"> ...
    <li class="product"> ...
    ...

.item-open .product {
    opacity: 0.15;
}

.item-open .product.open {
    opacity: 1;
}