关闭

Web流布局实例

标签: 流布局
79人阅读 评论(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.onload=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;
        }
    }
}

下载:

点击打开链接

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场