瀑布流JQ特效代码

来源：互联网发布：人工智能人类终结编辑：程序博客网时间：2024/05/21 12:51

自己在做java以前，自学过一段时间的前端，最近没事翻出来以前写过的一些前端的小案例，现在感觉也挺好玩，今天特地分享出来，感兴趣的朋友可以看看，虽然技术含量倒不是很多，但是回忆起当初自学过的那段经历，感觉还挺欣慰的，对于学习编程来说，自学真的挺煎熬的，但是要是真的能钻进去也就乐在其中了。

瀑布流的效果呢就是，鼠标向下滑，图片会自动加载，一直滑，图片自动补位空缺的地方，让图片错落有序的排列，如同看瀑布一般。

废话不多说上源码：

$(function(){imgLocation()var imgData = {"Data":[{"images":"0.jpg"},{"images":"1.jpg"},{"images":"2.jpg"},{"images":"3.jpg"},{"images":"4.jpg"},   {"images":"5.jpg"},{"images":"6.jpg"},{"images":"7.jpg"},{"images":"8.jpg"},{"images":"9.jpg"},   {"images":"10.jpg"},{"images":"11.jpg"},{"images":"12.jpg"},{"images":"13.jpg"},{"images":"14.jpg"},   {"images":"15.jpg"},{"images":"16.jpg"}]}//这里的images是图片的路径$(window).scroll(function(){if(check()){$.each(imgData.Data,function(key,value){var oBox=$("<div>").addClass('box').appendTo($('#main'));var ooBox=$('<div>').addClass('pic').appendTo($(oBox));var oimg=$('<img>').attr('src','images/'+$(value).attr('images')).appendTo($(ooBox))//这里的value为原生JS对象所以转化为jQ对象})imgLocation()}})})//判断是否需要加载 function check(){var $lastboxs=$('#main>div').last();var lastHeight=$lastboxs.offset().top+Math.floor($lastboxs.outerHeight()/2);var scrollTop=$(window).scrollTop();var clientHeight=$(window).height();console.log(lastHeight+":"+scrollTop+":"+clientHeight)if(lastHeight<scrollTop+clientHeight)return true; }//加载图片function imgLocation(){var boxs=$("#main>div") var imgWidth=boxs.eq(0).outerWidth();  var num=Math.floor($(window).width()/imgWidth) $("#main").width(imgWidth*num).css("margin","0 auto") var heightArr=[]; boxs.each(function(index,value){//each中的两个参数index如同for循环中的i，value为DOM对象是i对应的class为box的元素，  //如同for循环中的boxs[i] var h=boxs.eq(index).outerHeight(); if(index<num){ heightArr[index]=h; }else{ var minHeight=Math.min.apply(null,heightArr) var minNum=$.inArray(minHeight,heightArr)//调用这个方法直接可以返回该数组中最小值的位置 $(value).css({     //value本身为DOM对象所以不能直接用JQ方法,所以要将value转化为jq对象：$(value)所以加一个$() "position":"absolute", "left":imgWidth*minNum+"px", "top":minHeight+"px" }) heightArr[minNum]=heightArr[minNum]+boxs.eq(index).outerHeight(); } })}

下面是html标签部分：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JQ瀑布流</title><link rel="stylesheet" href="JQpubu.css"><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><!-- <script type="text/javascript" src="jquery-2.2.3.min.js"></script> --><script type="text/javascript" src="JQpubu.js"></script></head><body><div id="main"><div class="box"><div class="pic"><img src="images/0.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/11.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/12.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/13.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/14.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/15.jpg" alt=""></div></div><div class="box"><div class="pic"><img src="images/16.jpg" alt=""></div></div></div></body></html>

还有一点CSS的代码：

*{margin: 0;padding: 0;}#main{position: relative;margin: 0 auto;}#main .box{float: left;/*margin-left: 10px;margin-top: 10px;*/padding: 5px;}#main .box .pic img{width: 150px;}#main .box .pic{border: 5px solid #ddd;border-radius: 5px;padding: 5px;box-shadow: 0 0 5px #ddd;}

本打算上传一个压缩包来着，但是找了找好像没找到在哪上传，所以代码就给的详细一点了，如果感兴趣的话可以看看。

1 0