瀑布流布局(jq实现)

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_34281477

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量84

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dream-w/p/5204384.html

版权

参考刘晓帆大神的瀑布流效果自己也写了个希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！

html代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="z-box">
    <ul>
        <li>
            <h3>1A</h3>
            <a>aa</a>
            <a>aa</a>
            <a>aa</a>
        </li>
        <li>
            <h3>2B</h3>
            <a>bb</a>
        </li>
        <li>
            <h3>3C</h3>
            <a>cc</a>
            <a>cc</a>
            <a>cc</a>
            <a>cc</a>
        </li>
        <li>
            <h3>4D</h3>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
        </li>
        <li>
            <h3>5E</h3>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
        </li>
        <li>
            <h3>6F</h3>
            <a>ff</a>
            <a>ff</a>
            <a>ff</a>
        </li>
        <li>
            <h3>7G</h3>
            <a>GG</a>
            <a>GG</a>
            <a>GG</a>
        </li>
        <li>
            <h3>8E</h3>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
        </li>
        <li>
            <h3>9F</h3>
            <a>ff</a>
            <a>ff</a>
            <a>ff</a>
        </li>
        <li>
            <h3>10G</h3>
            <a>GG</a>
            <a>GG</a>
            <a>GG</a>
        </li>
    </ul>
</div>
</body>
</html>

View Code

css代码：

*{
    margin:0px;
    padding:0px;
    font-size:12px;
}
body{
    background:pink;
}
li{
    list-style:none;
}
.z-box{
    width:300px;
    height:auto;
    box-shadow:0px 0px 1px red;
    margin:0 auto;
    position:relative;
}
.z-box ul{

}
.z-box ul li{
    width:44px;
    text-align:center;
    position:absolute;
    background:#f3f3f3;
    top:0px;
    left:40%;
    transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -moz-transition:all 0.5s;

}
.z-box ul li a{
    display:block;
    width:44px;
    

}

View Code

javascript代码：

$(function(){

    var $oLi=$(".z-box > ul li");    //jq对象
    var dWidth=$(".z-box").outerWidth();
    var lWidth=$oLi.outerWidth()+5;    //li的宽度+间距
    var col=Math.round(dWidth/(lWidth+10));    //列数+间距
    console.log(col);

    var array=[];    //存放列坐标的数组

    for(var i=0;i<col;i++){
        array.push([i*lWidth,0]);    //初始化列的坐标
    }

    $oLi.each(function(){    //遍历每一个单位
        
        var _temp=0;    //最低列暂存体
        var _height=$(this).outerHeight();    //获取当前单位的高度

        for(var j=0;j<col;j++){
            if(array[j][1]<array[_temp][1]){
                _temp=j;    //比较哪列是最低索引
            }
        }

        $(this).css({"left":array[_temp][0]+"px","top":array[_temp][1]+"px"});    //设置单位的坐标
        array[_temp][1] = array[_temp][1] + _height+5;    //计算列的最低坐标
    
    });    
    
    //获取最高top
    var nLi=[],
        n=0,
          max=0,
        nHeight;
    for(var i=0;i<col;i++){
        if(array[i][1]>array[n][1]){
            n=i;
            max=array[i][1]-5;
        }
    }

    for(var j=0;j<col;j++){
        if(array[j][1]>array[n][1]){
            n=j;
            $(".z-box").css("height",array[j][1]-5+"px");
            console.log("min="+j);

        }else{
            nHeight=max-array[j][1];
            nLi[j]=document.createElement("li");
            $(nLi[j]).css("height",nHeight);
            $(nLi[j]).css({"left":array[j][0]+"px","top":array[j][1]+"px"});
            $(".z-box > ul").append(nLi[j]);
            console.log("max="+j);
        }
    }
});

转载于:https://www.cnblogs.com/dream-w/p/5204384.html

weixin_34281477

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流布局(jq实现)

参考刘晓帆大神的瀑布流效果自己也写了个希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！html代码：<!DOCTYPE html><html><head><script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></scr...
复制链接

扫一扫