分别用css3、js、jQuery三种方法写瀑布流

瀑布流一般用在照片页面当中，用来设计照片的位置；

我分别用css3、js和jQuery来设计瀑布流的页面；

css3页面的代码如下：

<div class ="container">

                < div id= "img"><img src="img/10.jpg" /></div>

                < div id= "img"><img src="img/11.jpg" /></div>

                < div id= "img"><img src="img/2.jpg" /></div>

                < div id= "img"><img src="img/3.jpg" /></div>

                < div id= "img"><img src="img/4.jpg" /></div>

                < div id= "img"><img src="img/5.jpg" /></div>

                < div id= "img"><img src="img/6.jpg" /></div>

                < div id= "img"><img src="img/7.jpg" /></div>

</div>

其实利用css3来实现瀑布流的效果主要是利用了多列，代码比较简单，不多解释这些代码了，下面是css的代码：

*{

      margin: 0px;

      padding: 0px;

}

.container{

      column-count: auto;

      column-gap: 5px;

      column-width: 300px;

      -moz-column-count: auto;

      -moz-column-width: 300px;

      -moz-column-gap: 5px;

}

#img img {

      width: 330px;

      margin: 5px 0px;

}

接着在js和jQuery当中主页面的代码都是一样的，设计思想也是一样的：

<div id ="container">

                < div class= "box">

                     < div class= "img">

                           < img src= "img/10.jpg" />

                           < p> 球队的logo设计，代表计算机女篮大放异彩</ p>

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/11.jpg" />

                           < p> picture one</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/2.jpg" />

                           < p> picture two</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/3.jpg" />

                           < p> picture three</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/4.jpg" />

                           < p> picture four</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/5.jpg" />

                           < p> picture five</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/6.jpg" />

                           < p> picture six</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/7.jpg" />

                           < p> picture seven</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/花总-1.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/花总 -2.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/花总-3.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/花总-4.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src ="img/数字人.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/12.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/13.jpeg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/14.jpeg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/15.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                < div class= "box">

                     < div class= "img">

                           < img src= "img/16.jpg" />

                           < p> picture zero</p >

                     </ div>

                     

                </ div>

                

           </ div>

以上主要是四层div进行镶嵌套使用，比较简单，不多解释；

下面是js版本的css样式的代码：

*{

      margin: 0px;

      padding: 0px;

}

.container{

      position: relative;

      margin: 0 auto ;

     

}

.box{

      padding: 5px;

      float: left;

}

.img{

      box-shadow:0 0 5px darkgrey;

      border-radius: 8px;

      border: 1px solid #A9A9A9 ;

      padding: 5px;

}

.img img {

      width: 250px;

      height: auto;

}

p{

      text-align: center;

      font-size: small;

      color:darksalmon;

}

简单的设置了几个div而已；下面的是全场的重点，也是整个js瀑布流设计的思想体现：

整个设计的思想就是先把第一行放好后，寻找到第一行高度最小的一张图片，将下一张图片放置在它的下面，然后将这两张照片的高度加起来继续寻找下一张高度最小的图片，依次类推的放置好所有的图片；而每一行放置的图片数量就是屏幕的大小除以图片的宽度；

window.onload =function(){

     wwaterFlow( "container","box" );//在文档加载完毕后调用瀑布流函数

}

function wwaterFlow( wparent,wchild ){

     

      var wfather= document.getElementById(wparent);//获得父节点

     

      var wallChild= getAllChild(wfather,wchild);//通过getAllChild这个函数来获得子节点

     

      var wscrenwidth= document.documentElement.clientWidth;//获得屏幕的大小

     

      var alltag= wfather.getElementsByTagName( "*");//获得当前所有的子节点

     

      var num= Math.floor(wscrenwidth/alltag[ 0].offsetWidth);//因为css设置的照片宽度是一样的所以只取其中一张即可

     

      wfather.style.cssText ='width:'+ alltag[0].offsetWidth *num+ 'px;margin:0 auto';

     

     getMinHeightOfCols(wallChild,num);

}

function getAllChild( parent,classname ){

     

      var allTag2= parent.getElementsByTagName("*");

     

      var child= [];

     

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

           

            if (allTag2[i].className== classname) {

                

                child.push(allTag2[i]);

           }

           

     }

      return child;

}

function getMinHeightOfCols( array,num ){

     

      var oneCols= [];

     

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

           

            if (i< num) {

                

                oneCols[i] =array[i].offsetHeight;

                

           } else{

                

                 var minHeight= Math.min.apply(null,oneCols);

                

                 var minHeightIndex=getMinIndex(oneCols,minHeight);

                

                 array[i].style .position= 'absolute';

                

                 array[i].style .top=minHeight +'px';

                

                 array[i].style .left=array [minHeightIndex].offsetLeft+'px' ;

                

                oneCols[minHeightIndex] +=array[i].offsetHeight;

           }

           

     }

}

function getMinIndex( array,height ){

      for (var i in array ) {

            if(array [i]==height){

                 return i;

           }

     }

}

下面是jQuery版本css的代码：

*{

      margin: 0;

      padding: 0;

}

.box{

      position: relative;

      float: left;

     

}

.img{

      box-shadow:0 0 5px darkgrey;

      border-radius: 8px;

      border: 1px solid #A9A9A9 ;

      padding: 5px;

      margin: 0 auto ;

}

.img img {

      width: 255px;

      height: auto;

}

p{

      text-align: center;

      font-size: small;

      color:darksalmon;

}

下面是jQuery版本中js文件的代码：

jQuery当中图片的布局思想和js版本的一样，就不多解释了，重点放在如何判断什么时候可以加载：

我这里采取的加载时刻是当当前窗口的高度已经超过了最后一张图片一半的位置；

  

$(document).ready( function(){

     $( window).on("load" ,function(){

           imgLocation();

            var imgLoc={ "data":[{"src" :"10.jpg"},{ "src":"11.jpg" },{"src": "12.jpg"},{"src" :"13.jpeg"},

                          { "src":"14.jpeg" },{"src": "15.jpg"},{"src" :"16.jpg"},{ "src":"1.jpg" },{"src": "2.jpg"},

                          { "src":"3.jpg" },{"src": "4.jpg"},{"src" :"5.jpg"},{ "src":"6.jpg" },{"src": "7.jpg"},

                            {"src": "8.jpg"},{"src" :"9.jpg"},{ "src":"10.jpg" },{"src": "11.jpg"},{"src" :"12.jpg"}]};

                           

            //模拟json数据格式

           

            window.onscroll =function(){

                 if(scrollside()){

                     $.each(imgLoc.data, function(index ,value){

                            var box=$( "<div>").addClass("box" ).appendTo($("#container")); //创建一个box在container后面

                            var img=$( "<div>").addClass("img" ).appendTo(box);

//                         $("<img />").attr("src","./img/"+$(value).attr("src").appendTo(img));

//                         $("<img />").attr("src",""+$(value).attr("src")).appendTo(img);

                            $("<img />").attr( "src","img/" +$(value).attr ("src")).appendTo(img);

                           

                     });

                     imgLocation();

                }

           };

     });

     

});

function scrollside(){ //判断是否可以滚动加载图片(判断滚动页面的高度是否超过了页面)

      var box= $(".box"); //获取box

      var lastBoxHeight=box.last().get( 0).offsetTop+ Math.floor(box.last().height() /2); //获得判断是否可以滚动的高度

      var documentHeight= $(document).width(); //获得屏幕的高度

      var scrlHeight= $(window).scrollTop(); //获得滚动条的高度

      return (lastBoxHeight<documentHeight +scrlHeight)? true:false ;//当当前屏幕的高度少于滚动条和本来屏幕的高度的时候就可以进行加载

     

}

//此函数用来对图片进行布局

function imgLocation(){

      var box= $(".box");

      var boxWidth= box.eq(0).width(); //用eq来寻找第一个box

      var num=Math.floor($( window).width()/ boxWidth);//window.width就是获得屏幕的宽度，num是一行能排放照片的数量

      var boxArr= [];

     box.each( function(index ,value){ //each是jQuery的循环

//         console.log(index+"--"+value);

            var boxHeight= box.eq(index).height();

            if(index< num){

                boxArr[index] =boxHeight;

           } else{

                 var minHeight= Math.min.apply(null,boxArr);

//              console.log(minHeight);

                 var minHeightIndex= $.inArray(minHeight,boxArr);

//              console.log(minHeightIndex);

                 $(value).css({

                      "position":"absolute" ,

                      "top":minHeight,

                      "left":box.eq(minHeightIndex).position ().left,

                     

                });

                boxArr[minHeightIndex] +=box.eq(index).height();

           }

     });

     

}