瀑布流布局的Js

最近自己测试着搞一些小研究，看到很多新的网站都喜欢用瀑布流布局，就自己模拟搞了一份，搞完之后发现还能改进，添加新的对象如父级容器、每块的宽度，间隔，这样可以替换代码中的宽度数字。

原理很简单，就是先区分每列，给每列的块加上不同的样式，例如第一列的所有块都是class1，第二列的都是class2，依次类推，然后再依次给每块定位。

JQ写的，要用到JQ库

html代码部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流测试</title>
<style type="text/css">
*{ margin:0; padding:0;}
.container{ width:100%; float:left; padding-top:30px;}
div.center{position:relative; margin:0 auto; width:920px}
div.center div{position:absolute; width:200px;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="web.js"></script>
        <script type="text/javascript">
        $(function(){
                pubu(".center div",4);
            })
        </script>
</head>
<body>

<div class="container">

    <div class="center">
        <div style="height:300px; background:#999"></div>
        <div style="height:400px; background:#CFF"></div>
        <div style="height:350px; background:#CCF"></div>
        <div style="height:450px; background:#C9F"></div>
        <div style="height:250px; background:#CC6"></div>
        <div style="height:270px; background:#6F6"></div>
        <div style="height:300px; background:#F69"></div>
        <div style="height:360px; background:#0CC"></div>
        <div style="height:390px; background:#0F3"></div>
        <div style="height:350px; background:#00F"></div>
    </div>

</div>

</body>
</html>

 

jq部分

// JavaScript Document

//瀑布流布局测试by 王2013-9-18(可改进，增加父级容器、模块宽度、模块间隔)
function pubu(box,num){
//取排列的块为box，列数num    
    var box=$(box)
//区分每列    
    var l=box.length,i,o;
    var e=l/num+1;
    for(i=1;i<e;i++){
        if(o<1){
            o=1
            }else{o=o-1};
            for(o=1;o<num+1;o++){
            box.eq(i*num-o).addClass("class"+o);
            }
        }

//定位
        for(var t=0;t<num;t++){
            box.eq(t).css({"top":0,"left":230*t});
            x=box.eq(t).attr("class");
            var j='"'+'.'+x+'"';
            var cl=eval(j);
            var x=$(cl).length;
            var sum=0;
            for(var k=0;k<x;k++){
                var s=$(cl).eq(k).height();
                sum=sum+s;
                $(cl).eq(k+1).css({"top":sum+30*(k+1),"left":230*t});
                }
            }


}

 

posted @ 2013-09-26 09:26  王坑坑在翻滚中  阅读(338)  评论(0)  编辑  收藏  举报