Insert a picture on a Web page with a waterfall stream

When we need to insert a lot of pictures of the page, in order to be beautiful, we can choose to use waterfall Flow method to insert the picture

First we put in the body the picture we need to show

<DivID= "box">    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/1.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/2.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/3.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/4.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/5.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/6.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/7.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/8.jpg">        </Div>    </Div>    <Divclass= "Dinwei">        <Divclass= "Pic">            <imgsrc= "Image/9.jpg">        </Div>    </Div></Div>

View Code

Then set the style

<style type= "Text/css" > *{margin:0;padding:0; }. Dinwei{float: Left; }. pic{padding:5px;Border:1px solid #000000; }img{margin:0;padding:10px;width:220px;Height:Auto; }</style>

View Code

The next step is to display the image in the waterfall flow of the way JS

<script type= "Text/javascript" > Window.onload=function (){var dinwei=document.getelementsbyclassname ("Dinwei"); var windwidth=document.documentelement.clientwidth| |    Document.body.clientWidth;    var dinwidth=getstyle (dinwei[0], "width");    var num=math.floor (windwidth/dinwidth);    Calculate a few pictures per row//Remove the column with the lowest height var heightlist=[]; for (Var i=0;i<dinwei.length;i++) {if (i<num) {Heightlist[heightlist.length]=getstyle (dinwei[i], "Hei        Ght "); }Else{var minheight=getmin (heightlist);            var Amin=minheight.value;            var Index=minheight.index;            var temp=dinwei[i];            temp.style.position= "Absolute";            temp.style.top=amin+ "px";            temp.style.left=index*dinwidth+ "px";        Heightlist[index]=amin+getstyle (temp, "height"); }}} function Getmin (arr){var min=arr[0];            [3,3,2,1,5,2] for (var i=1;i<arr.length;i++) {if (arr[i]<min) {min=arr[i]; }} var index=0; for (Var j=0;j<arr.length;j++){if (arr[j]==min) {index=j;            Break }} return{value:Min,index:index}} function GetStyle (obj, attr){if (obj.currentstyle) {return parsefloat (obj.currentstyle[attr]); }Else{return parsefloat (window.getComputedStyle (obj) [attr]); }}</script>

Insert a picture on a Web page with a waterfall stream