令人印象深刻的响应式JavaScript效果。 怎么做？

Question

最近，我遇到了一个非常好的响应式JavaScript，我想实现自己的功能。 您可以在此处查看示例：

http://themes.iki-bir.com/alphine-wp/# ！ （通过按任意缩略图）。 对缩略图进行排序确实是一个古老的技巧，但是看到额外的内容对我来说却是新事物。

由于我是javascript新手，也许有人知道这方面的任何教程或课程吗？ 提前致谢！

Answer 1

这是“同位素”-此处的演示和教程： http : //isotope.metafizzy.co/

Answer 2

在每行缩略图下方隐藏一个div。 更改缩略图onclick事件处理程序上的内容。 内容更改后，请使用jQuerys slidetoggle： http ://api.jquery.com/slideToggle/

至少多数民众赞成在我会怎么做。 让我知道你是否要我详细说明

一些示例代码：

$(function(){

    $('.thumbnail').click(function(){

        var $this = $(this);
        var $divToShow = $this.nextUntil('div.container');
        //fetch the divs content via ajax or however u want to do it here...
        $divToShow.stop(true, true).slideToggle();
    });

});

Answer 3

我以为您想知道如何进行排序，因为其他一切都非常简单:)如果您能告诉我这种sorting-trick-works / link如何工作，我将为您提供其他方面的最佳解释:)

更多内容部分可以由纯CSS实现，而无需任何JavaScript。 具有这种结构；

<div class="thumb">
    <div class="img"></div>
    <div class="content"></div>
</div>

并有这个CSS存在；

.thumb{
    display:block;
    width:100px;
    height:100px;
}
.thumb div{
    position:absolute;
    width:inherit;
    height:inherit;
}
.thumb div.content{
    opacity:0;
}
.thumb:hover div.content{
    opacity:1;
}

或者，您也可以在鼠标进入后立即收听“ onMouseOver”事件。 对于加载完整描述的另一部分，请听“ onClick”事件并获取xhr信息。

Answer 4

我会尝试http://api.jquery.com/slideDown/以获得最基本的信息……之后……这只是想像力和品味的结合：） jquery网站上有很多文档…… http ：//docs.jquery.com/UI/Effects/Slide

Answer 5

如果您不想使用像jQuery这样的库，最简单的方法是添加隐藏了溢出的div，将绝对值和高度0设置在每行下，并在onclick上将其展开。