<style>

            *{

                padding:0;

                margin:0;

            }

            #main{

                position:relative;

            }

            .box{

                padding:15px 0 0 15px;

                float:left;

            }

            .pic{

                padding:10px;

                border:1px solid #ccc;

                border-radius:5px;

                box-shadow:0 0 5px #ccc;

            }

            .pic img{

                width:165px;

                height:auto;

            }

        </style>

        <script>

            window.onload=function(){

                waterfall('main','box');

            }

            function waterfall(parent,box){

                //将main下的所有class为box的元素取出来

                var oParent = document.getElementById(parent);

                var oBoxs=getByClass(oParent,box);

                //计算整个页面显示的列数（页面宽/box的宽度)

                var oBoxW=oBoxs[0].offserWidth;   //202=165+2*10+1*2+15

                var cols=Math.floor(document.documentElement.clientWidth/oBoxW);

                //设置main的宽、居中

                oParent.style.csstText='width:'+oBoxW*cols+'px;margin:0 auto';

            }

            //根据class获取元素

            function getByClass(parent,clsName){

                var boxArr=new Array;

                var oElements = parent.getElementsByTagName('*');

                for(var i=0;i<oElements.length;i++){

                    if(oElements[i].className==clsName){;

                    boxArr.push(oElements[i]);

                }

            }

            return boxArr;

        }

        </script>