仿花瓣网图片展示效果

前段时间设计界的热点是花瓣网，因为一些情况，花瓣网停止访问进行维护。过年回来采用了新域名进行访问,目前是全面可以访问了。
有小伙伴在做自己的网站的时候，采用花瓣网的图片展示效果，所以就写了这个demo。

先看一下效果：

仿花瓣网图片展示效果

说一下实现原理：
首先建立图片列表结构，当点击其中的图片，弹出完整显示窗，其实就是模态窗口的原理，所以本demo也是采用了节点控制来制作效果，将模态框的HTML结构追加到网页中，关闭后进行删除节点。

换图方面是获取到列表内部的img地址，更新到模态框的HTML里面去。

其中这里面还有一个小问题，一些图片比较高，因此模态框会出现滚动条，列表页面和模态窗口的滚动条同时出现，所以demo中采用了一个小技巧进行解决。

下面开始看代码：

案例代码

css代码

HTML代码

    
仿花瓣网图片展示效果
    

        

            

            

            

        
        

            

            

            

        
        

            

            

        
        

            

            

        
    

特效代码

案例详细讲解请观看视频：

扫二维码观看视频教程