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;
        }
    }
}

下载:

点击打开链接

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

android 流布局实例

特别好用的util,啥都不说了直接上代码import android.content.Context; import android.util.AttributeSet; import android...
  • u011531708
  • u011531708
  • 2017年08月18日 16:41
  • 86

Swing中流式布局实例

1 package com.szsm.swing.framepanel; import java.awt.FlowLayout; import javax.swing.JButton; i...
  • jintianhen1
  • jintianhen1
  • 2013年09月14日 08:31
  • 745

流布局

FlowLayout(流式布局) 使用FlowLayout布局方式的容器中组件按照加入的先后顺序按照设置的对齐方式(居中、左对齐、右对齐)从左向右排列,一行排满(即组件超过容器宽度后)到下一行开始继...
  • weixinru4631260
  • weixinru4631260
  • 2016年05月01日 16:17
  • 234

WEB前端 | H5基础——(4)流式布局、响应式布局、Viewport

一 、流式布局 流式布局 body { margin: 0; } .reddiv { width: 30%; /* 单位 ...
  • Erosvan
  • Erosvan
  • 2016年09月22日 19:53
  • 3345

iOS 自定义流布局 进阶篇

大家好 我交mark qq:1124728522 欢迎与我交流心得
  • iOS_mark
  • iOS_mark
  • 2016年07月06日 22:43
  • 1013

标签流布局

标签流布局
  • u014620028
  • u014620028
  • 2016年04月06日 14:57
  • 349

动态添加流式布局

自定义流式布局:之前的一篇文章写过,这里就不阐述了:http://blog.csdn.net/qq_24675479/article/details/78921070 随后封装一个方法工具类:Gra...
  • qq_24675479
  • qq_24675479
  • 2017年12月29日 09:58
  • 38

100行Android代码自定义一个流式布局-FlowLayout

通过不到100行代码,模仿css3的flexbox功能,实现一个Android的流式布局。同时介绍了如何把打出来的aar包upload到jCenter。...
  • FeeLang
  • FeeLang
  • 2015年02月16日 22:00
  • 16429

ASP.NET WEB API入门实例

1.WebApi是什么     ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务。ASP.NET Web API 是一种用于...
  • qq_36456952
  • qq_36456952
  • 2017年03月17日 11:57
  • 3417

android 流布局 FlowLayout

功能一、自定义属性: 1、行数:max_lines_num , 默认无限制; 2、行间距:width_space,默认16dp; 3、列间距...
  • struggle323
  • struggle323
  • 2016年09月01日 18:05
  • 103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Web流布局实例
举报原因:
原因补充:

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