jQuery瀑布流从不同方向加载

来源:https://www.sucaihuo.com/js/576.html 2015-11-27 05:22浏览(995) 收藏

本文演示了三种瀑布流效果:分别是从右侧滑动,底部滑动和旋转效果。实现这三种效果,只要在ul上定义属性即可。提示:鼠标悬浮图片上也有动画效果。
jQuery瀑布流从不同方向加载
分类:其它特效 > 瀑布流 难易:初级
查看演示 下载资源 下载积分: 20 积分

引入并调用瀑布流相关插件

<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/colorfinder-1.1.js"></script>
<script src="js/gridScrollFx.js"></script>
<script>
    new GridScrollFx(document.getElementById('grid'), {
        viewportFactor: 0.4
    });
</script>

瀑布流布局html代码

<ul class="grid swipe-right" id="grid">
    <li class="title-box">
        <h2>作者 <a href="http://www.sucaihuo.com/">素材火</a></h2>
    </li>
    <li><a href="http://www.sucaihuo.com/js/574.html"><img src="http://www.sucaihuo.com/jquery/5/571/demo/images/pic/03.jpg" alt="素材火"><h3>cxSelect多级省市区联动插件 </h3></a></li>
    <li><a href="http://www.sucaihuo.com/js/572.html"><img src="http://www.sucaihuo.com/jquery/5/571/demo/images/pic/01.jpg" alt="素材火"><h3>jQuery指针不动转盘动的Rotate转盘插件</h3></a></li>
    <li><a href="http://www.sucaihuo.com/js/571.html"><img src="http://www.sucaihuo.com/jquery/5/571/demo/images/pic/02.jpg" alt="素材火"><h3>jquery仿美丽说瀑布流效果 </h3></a></li>
</ul>

演示一:向右滑动 swipe-right

<ul class="grid swipe-right" id="grid">

演示二:向下滑动swipe-down

<ul class="grid swipe-down" id="grid">

演示三:旋转效果swipe-rotate

<ul class="grid swipe-rotate" id="grid">
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2