Web流布局实例

最新推荐文章于 2021-08-02 10:11:48 发布

goulei2010

最新推荐文章于 2021-08-02 10:11:48 发布

阅读量386

点赞数

分类专栏： JavaScript css 文章标签：流布局

本文链接：https://blog.csdn.net/goulei2010/article/details/53994776

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

在外面的大盒子相对定位，box绝对定位。通过JavaScript控制box的位置即可实现。

html：

<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="img/0.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/2.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/3.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/4.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/5.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/6.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/7.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/8.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/9.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/10.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/11.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/12.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/13.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/14.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="img/15.jpg" />
            </div>
        </div>
    </div>
</body>

CSS:

*{
    margin: 0;
    padding: 0;
}

#main{
    position: relative;
}

.box{
    float: left;
    padding: 15px 0 0 15px;
}

.box .pic{
    overflow: hidden;
    padding: 10px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px #eee;
    border-radius: 5px;
}

.box img{
    width: 165px;
}

JavaScript：

window.οnlοad=function () {
    waterFull("main","box");
}

function waterFull(parent,box) {
    var oParent= document.getElementById(parent);
    var oBoxs=getByClass(parent,box);

    var oBoxW=oBoxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
    oParent.style.cssText="width:"+cols*oBoxW+"px;margin:0 auto;";

    var hArr=[];
    for(var i=0;i<oBoxs.length;i++){
        if(i<cols){
            hArr[i]=oBoxs[i].offsetHeight;
        }else{
            var minH=Math.min.apply(null,hArr);
            var index=getArrMinIndex(hArr,minH);

            oBoxs[i].style.position="absolute";
            oBoxs[i].style.top=hArr[index]+"px";
            oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";

            hArr[index]+=oBoxs[i].offsetHeight;
        }
    }
}

function getByClass(parent,clsName) {
    var oParent= document.getElementById(parent);
    var oElements=oParent.getElementsByTagName("*");
    var arrEle=[];
    for(var i=0;i<oElements.length;i++){
        if(oElements[i].className==clsName){
            arrEle.push(oElements[i]);
        }
    }
    return arrEle;
}

function getArrMinIndex(arr,val) {
    for (var i=0;i<arr.length;i++){
        if(arr[i]==val){
            return i;
        }
    }
}

下载：

点击打开链接