本文演示了三种瀑布流效果:分别是从右侧滑动,底部滑动和旋转效果。实现这三种效果,只要在ul上定义属性即可。提示:鼠标悬浮图片上也有动画效果。
引入并调用瀑布流相关插件
<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">
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791