正文
jquery练习之瀑布流
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
最近有空简单学习了下瀑布流，写完后想和大家一起分享下，但我知道我的代码有很多缺陷不足，希望多多包涵。（纯属兴趣非专业学习人士）
众所周知，瀑布流大概分为2种，一种是浮动式的瀑布流，一种是定位式的瀑布流，后者要稍微难于前者，但思维上大同小异。话不多说先上效果图。
1.首先浮动式的瀑布流，这个较简单，需要注意的是对追加图片列的UL的高度的比较，下面为代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动瀑布流</title>
<style type="text/css">
* {padding: 0px;margin: 0px;}
#box {width: 1000px;margin:50px auto;background:black;}
#box ul {float: left;width: 230px;margin: 10px;list-style-type:none;}
#box ul li img {width: 230px;}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript">
function checkHeight(OUL){
var height=Infinity;
var Index=0;
for (var a = 0; a < OUL.length; a++) {
var now_height=OUL[a].offsetHeight;
if (now_height<height) {
height=now_height;
Index=a;
};
};
return Index;
}function CreateIMage(){
var Obx=document.getElementById('box')
var OUL=Obx.getElementsByTagName('ul');
for (var i = 2; i < 13; i++) {
var IMG=new Image();
IMG.src="data:images/"+i+".jpg";
var Oli=document.createElement('li'); Oli.append(IMG); var min_index = checkHeight(OUL);
OUL[min_index].append(Oli); };}; $(function(){ CreateIMage();
window.onscroll = function(){
var ST = document.documentElement.scrollTop || document.body.scrollTop;
var vH = document.documentElement.clientHeight;
if (ST+vH>document.body.scrollHeight*0.8) {
CreateIMage();
}; } });</script>
</body>
</html>
2。定位式的瀑布流，这个和浮动式的差不多，需要注意的是对追加div的定位，而定位的重点是div的top和left的获取，下面为代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位瀑布流</title>
<style type="text/css">
* {padding: 0px;margin: 0px;}
#box {margin: 50px auto;position: relative;}
</style>
<script type="text/javascript" src="js/jquery.js"></script> </head>
<body>
<div id="box"> </div> <script type="text/javascript">
function getColor(){
var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var colorArray=colorValue.split(",");
var _color="#";
for(var i=0;i<6;i++){ _color+=colorArray[Math.floor(Math.random()*16)] }
return _color;
} function checkHeight(obj){
var height=Infinity;
var index=0;
for (var a = 0; a < obj.length; a++) {
var now_height=obj[a]; if (now_height<height) {
height=now_height;
index=a;
};
}; return(index); }; $(function(){
var Obox=document.getElementById('box');
var VW=$(window).width();
var Default_width=240;
var div_num=Math.floor(VW/Default_width)-1;
//设置box的宽度使其居中
$("#box").css({"width":Default_width*div_num});
var arrHeight=[0,0,0,0];
CreateDiv(); function CreateDiv(){ //初始化一个高度数组 for (var i = 2; i < 13; i++) {
var oImg=new Image();
oImg.src="data:images/"+i+".jpg";
oImg.style.width=230+"px";
var Odiv=document.createElement("div");
// Odiv.style.backgroundColor=getColor();
// Odiv.style.width=230+"px";
// var t=Math.ceil(Math.random()*150+150);
// Odiv.style.height=t+"px";
Odiv.style.position="absolute";
Odiv.append(oImg); var min_index=checkHeight(arrHeight);
Odiv.style.top=arrHeight[min_index]+"px";
Odiv.style.left=min_index*Default_width+5+"px";
Obox.append(Odiv); arrHeight[min_index]+=(Odiv.offsetHeight+5);}
}; window.onscroll=function(){
var ST=document.documentElement.scrollTop || document.body.scrollTop;
var VH=$(window).height();
if (ST+VH>(document.body.scrollHeight)*0.8){ CreateDiv();
}; }
}); </script>
</body>
</html>
