Question

我正在开发一种同位素 - 我希望在窗格扩展并打开时接近麦当劳示例。

http://www.mcdonalds.de/produkte/alle-produkte

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

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

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

Answer 1

您已经掌握了基础知识 - 通过CSS类open设置“展开”/“打开”Isotope元素的宽度和高度

<li class="product open">

然后触发Isotope的reLayout - 方法。

产品图像的缩放是通过CSS转换实现的，具体取决于所述类的存在：

.product-image {
    width: 148px;
    height: 148px;
    transition: all 0.4s ease-in-out;
}

.product.open .product-image {
    width: 308px;
    height: 308px;
}

但只是炸毁缩略图图像尺寸看起来不太好：在将open添加到Isotope元素之前，我们因此替换缩略图图像的src - 属性使用更大版本的产品图片的URL。后者存储在图像的data-src-large - 属性中：

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

McDonalds产品页面上的实现还向包含Isotope项目的父容器添加了CSS类item-open：

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

基于此类，同样通过CSS减少了不分配了open类的所有同位素项的不透明度：

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

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

您可以在此处看到CodePens符合以上代码段： http://codepen.io/fk/pen/dGAzl/（使用Isotope v1）和http://codepen.io/fk/pen/ohLvF/（使用Isotope v2） - 两者都有点粗糙边缘，但在最新的Chrome中工作。

请注意，我使用spin.js来显示加载指示符，略微更改了CSS类名称并省略了一堆标记，供应商前缀和IE特定的过滤器，而不是原始的McDonalds产品页面更容易掌握（希望;）） - 其他一切几乎都是1：1的副本。

另请注意，来自bundled with Isotope v1的imagesLoaded-plugin具有problems，如果您想使用它来确定何时使用当前standalone version of the plugin，您可能会更好加载高分辨率产品图片。

jsFiddle JavaScript包含一些可以帮助您的评论我希望结合这里的答案，这给你一些关于如何从你现在的位置继续前进的指示。

同位素扩展/收缩功能

1 个答案: