Web流布局实例

原创 2017年01月03日 15:25:04


在外面的大盒子相对定位,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;
        }
    }
}

下载:

点击打开链接

版权声明:本文为博主原创文章,未经博主允许不得转载。

bootstrap 流式布局示例

质量录入 rest/wx" method="post"> JA

Web流布局实例

  • 2017年01月03日 15:32
  • 478KB
  • 下载

一个Web布局实例

十天学会web标准(DIV+CSS)系列(十)div+css网页标准布局实例教程

一、建立站点 前面的课程都是零碎讲解一些相关知识,那么要做一个网站,首先需要建立一个站点。那么什么是站点,为什么要建立一个站点呢?因为网站不同于其它文件,比如一个图片,放到哪个盘哪个目录下都可以访问...
  • jarniyy
  • jarniyy
  • 2016年03月21日 14:46
  • 3288

jQuery学习实例:瀑布流布局

瀑布流效果已经成为展示类型网站的首选,所以有必要掌握其实现过程。实现这个效果目前有三种方法,分别为:JavaScript原生方法、jQuery方法、CSS3多栏布局。 一、其中JavaScript方法...

CSS3 弹性布局弹性流(flex-flow)属性详解和实例

弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction和flex...
  • iefreer
  • iefreer
  • 2016年02月24日 00:05
  • 19056

Android 自定义View 入门——FlowLayout实例(流布局)

了解了自定义View的流程,那么接下来最好就是对着一个自定义View去分析,加深一下对步骤的理解,这里拿FlowLayout去分析。这样一个自定义View 是继承的ViewGroup,因为它里面还有...

web学习-瀑布流布局(2)

为自己做的瀑布流加了后台代码,记录一下php版本通过session来储存页面中的box的个数,通过json做传递格式,通过对post的[‘action’]来判断请求的类型.是第一次加载,还是后续加载...

web之瀑布流布局

组件分享:http://pan.baidu.com/s/1eShoNx4 参考网站:http://www.wookmark.com/about/api 瀑布流布局非常适合大量图片的展示,一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web流布局实例
举报原因:
原因补充:

(最多只允许输入30个字)