求助。。急，想了很久了也做不出来。瀑布流布局

怎么来排每个div的top位置啊？
不会计算。
每4个div就换行。
求助。。急
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta charset="gb2312">
        <title>瀑布流以及回顶部的效果</title>
        <style type="text/css">            *{
                margin:0;
                padding:0;
            }
body{ background:#ccc }

#mydiv{ background:red;width:100px;height:200px }
.colum{background:orange;width:90px;position:absolute;}
        </style>
<div class="colum">sadsad</div>
<div class="colum">sadsad的萨芬的三分得手的萨芬的三分得手第三方第三方第三方斯蒂芬第三方速度</div>
<div class="colum">大幅度释放斯蒂芬斯蒂芬第三方的萨芬的三分得手</div>
<div class="colum">的释放斯蒂芬第三方第三方</div>
<div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
<div class="colum">大幅度释放斯蒂芬斯蒂芬第三方的萨芬的三分得手</div>
<div class="colum">的释放斯蒂芬第三方第三方</div>
<div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
<div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
<div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
<div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
<div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
        <script type="text/javascript">

var $ = function (id){ return document.getElementById(id) };
//getElements()方法用于获取页面中的元素
function getElements(){
var elem = document.getElementsByTagName("div");
return elem;
}
var items = getElements();
var columnCount = 4;
var columnWidth = 90;
var padding = 8;
var top;
//遍历所有元素
for(var i = 0, len = items.length; i < len; i++){
//获取当前的元素
var currentItem = items[i];
//获取当前对象的列
var currentColumn = (i + 1) % 4;
//获取当前对象的行
var currentLevel = parseInt(i / 4); //有了当前的行跟列可以根据上一层的对象计算出当前对象的高度
var left = currentColumn * (columnWidth + padding); //设置当前的位置
currentItem.style.left = left + 'px';
}
        </script>
        </head>
        <body>
           
    </html>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
        <head>
            <meta charset="gb2312">
            <title>瀑布流以及回顶部的效果</title>
            <style type="text/css">            *{
                    margin:0;
                    padding:0;
                }
                body{ background:#ccc }
                
                #mydiv{ background:red;width:100px;height:200px }
                .colum{background:orange;width:90px;position:absolute;}
            </style>
                    <div class="colum">sadsad</div>
            <div class="colum">sadsad的萨芬的三分得手的萨芬的三分得手第三方第三方第三方斯蒂芬第三方速度</div>
            <div class="colum">大幅度释放斯蒂芬斯蒂芬第三方的萨芬的三分得手</div>
            <div class="colum">的释放斯蒂芬第三方第三方</div>
            <div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
            <div class="colum">大幅度释放斯蒂芬斯蒂芬第三方的萨芬的三分得手</div>
            <div class="colum">的释放斯蒂芬第三方第三方</div>
            <div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
            <div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
            <div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
            <div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
            <div class="colum">的释放的释放斯蒂芬斯蒂芬的释放斯蒂芬第三方第三方第三方第三方斯蒂芬斯斯蒂芬第三方的手蒂芬的是</div>
            <script type="text/javascript">
                
                var $ = function (id){ return document.getElementById(id) };
                //getElements()方法用于获取页面中的元素
                function getElements(){
                    var elem = document.getElementsByTagName("div");
                    return elem;
                }
                var items = getElements();
                var columnCount = 4;
                var columnWidth = 90;
                var padding = 8;
                var top;
                //遍历所有元素
                for(var i = 0, len = items.length; i < len; i++){
                    //获取当前的元素
                    var currentItem = items[i];
                    //获取当前对象的列
                    var currentColumn = (i + 1) % 4;
                    //获取当前对象的行
                    var currentLevel = parseInt(i / 4);                //有了当前的行跟列可以根据上一层的对象计算出当前对象的高度
                    var left = currentColumn * (columnWidth + padding);
    var top = i > 3 ? (parseInt(items[i-4].style.top) + items[i-4].offsetHeight) + 2 : 0;                //设置当前的位置
                    currentItem.style.left = left + 'px';
    currentItem.style.top = top + 'px';
                }            
            </script>
            </head>
            <body>
               
        </html>