木桶布局知识总结

发表于 | 分类于


1、写在前面

思路：
1、从接口中拿到数据，然后提取数据中的所有图片地址保存到数组中。2、对数组进行遍历，遍历时用new Image()创建图片实例，把图片相应参数作为实参传递给渲染函数。3、渲染函数对每张图片的数据进行宽度总和，大于显示容器的宽度就说明这一行图片完成，然后再渲染到页面上

2、初始化变量

需要传入的变量有：容器，每行初设置的高度，图片间的间隙

1
2
3
4
5
6
7
8
9
10
11
init: function($ct,height,space){
    this.$ct=$ct;    //图片所展示区域的容器
    this.space=space;      //每张图片之间的空隙，需要在css里设置好，比如margin:5,那么每张图片的间隙是10
    this.width=$ct.width();
    this.height=height;
    this.imgArr=[];       //存放渲染到页面一行的所有图片的数据，数组里存放的是对象，{target:img,width,height},渲染到页面后就删除
    this.sum=0;           //把每一张图片宽度相加并加上间隙，当sum大于宽度时就减去最后一张图片宽度和间隙，说明这一行就放这么多图片
    this.colHeightArr=[];   //存放每行图片的高度
    this.colSpace=[];   //存放每行的所有空隙总和
    this.col=0;         //记录当前是第几行
}

3、定义获取数据函数

1
2
3
4
5
6
7
8
9
10
getData:function(callback){
      $.ajax({
          url:"http://rapapi.org/mockjsdata/27996/index/hotList",
          data:"",
          success:function(data){
              //console.log(data.list)
              callback(data.list)   //当数据获取成功时调用函数参数
          }
      })
  }

4、调用获取数据函数并对数据进行操作

获取数据后，保存图片网址到数组中，对数组进行遍历，注意一定不要用for遍历，用$.each(arr,function(){})代替，遍历时用new Image()创建图片实例，把每张图片相应参数作为实参传递给渲染函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
this.getData(function(dataArr){
      var urlArr=self.getUrl(dataArr);    //拿到数据中所有图片的网址保存到数组中
       //一定不要用for遍历，不然只能执行最后一个图片
       $.each(urlArr,function(index){
           //一定要new Image，当浏览器加载完图片后才能获取图片的高度和宽度
           var img=new Image();
           img.src=urlArr[index];
           img.onload=function(){
               var imgInfo={
                   target:img,   //记录Image实例
                   width: self.height*img.width/img.height,   //当图片高度为this.height时图片的宽度
                   height: self.height
               }
                 // console.log(imgInfo);
               self.render(imgInfo);    //将图片进行渲染
           }
       });
   });

5、定义render函数

把每张图片的imgInfo作为参数执行render方法，目的是把同一行的图片的imgInfo保存在数组中，然后再渲染到页面上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
render:function(data){
     this.sum+=data.width;
     this.sum+=this.space;    //this.sum不仅要保存宽度，还要保存间隙
     // console.log(this.sum);
     if(this.sum>=this.width){    //当sum大于容器的宽度时，说明已经保存了一行图片
         var imgArrLength=this.imgArr.length;    //这是一行图片的个数
         this.sum-=data.width;
         this.sum-=this.space;
         this.colSpace[this.col]=imgArrLength*this.space;    //保存这一行间隙总和
         var changeHeight=(this.width-this.colSpace[this.col])*this.height/(this.sum-this.colSpace[this.col]);    //注：一定要减去间隙，因为间隙是不变的
         this.colHeightArr[this.col]=changeHeight;
       //  console.log(this.imgArr);
         this.layout(changeHeight);
         this.sum=data.width+this.space;   //把当前图片宽度记录下来，当成下一行第一张
         this.imgArr=[]; this.imgArr.push(data);   //this.imgArr也清空，记录当前图片数据
     }
     else {
         this.imgArr.push(data);
     }
 }

6、定义layout函数

//参数作为每行图片的高度，只要设置了高度，宽度就会自动变化，把每张图片放到一个p标签里，然后渲染到容器里

1
2
3
4
5
6
7
8
9
10
11
12
layout:function(height){
     var self=this,$p=$("<p></p>");
      $p.attr("data-col",self.col).height(height);   //p为每一行图片的容器，只要设置容器的高度，然后让图片的height=100%就好了
      $.each(self.imgArr,function(index){
          var $img=$(this.target);
          $img.css({"height":"100%"});
          $p.append($img);
      });
      self.$ct.append($p);
      self.col++;
     // console.log(self.colSpace)
  }

7、监听浏览器宽度变化

当浏览器宽度变化时，图片跟着做相应变化

1
2
3
4
5
6
7
8
9
10
$(window).resize(function(){
       var newWidth=self.$ct.width();  //变化后容器的宽度
       var rate=0;    //定义变化比例，便于计算变化后的高度
       self.$ct.find("[data-col]").each(function(index,value){
           rate=(newWidth-self.colSpace[index])/(self.width-self.colSpace[index]);   //一定要减去间隙，因为间隙不按比例变
           self.colHeightArr[index]=self.colHeightArr[index]*rate;   //得到新的高度并记录下来
           $(this).height(self.colHeightArr[index]);
       })
       self.width=newWidth;    //记录容器宽度，方便下次宽度再变化使用
   })