<div id="main">  <div class="img-item"><img src="images/img1.png" data-size="398*636" alt=""></div>  <div class="img-item"><img src="images/img2.png" data-size="560*381" alt=""></div>  <div class="img-item"><img src="images/img3.png" data-size="338*537" alt=""></div>  <div class="img-item"><img src="images/img4.png" data-size="599*507" alt=""></div>  <div class="img-item"><img src="images/img5.png" data-size="532*535" alt=""></div></div>

#main{  width: 90%;  background-color: #dab;  text-align: center;  margin:0 auto;  position: relative;}img{  width: 100%;  box-sizing:border-box;  box-shadow: 2px 0 3px #ddd,0 2px 3px #ddd;}.img-item{  position: absolute;  padding: 3px;  box-sizing:border-box;  height: auto;  display: inline-block;}

//獲取圖片列表包裹層var $main = $('#main');//獲取窗口,用于自適應(yīng)var $mainWidth = $(window).width();//定義圖片寬度var imgWidth = 150;//可顯示的列數(shù)var columnNumber = Math.floor($mainWidth/imgWidth);//存儲top信息var data = [];//初始化,比如當(dāng)前可以顯示6列,那么這里就初始化6個(gè)空間for (var i = 0; i < columnNumber; i++) {  data[i] = 0;}

//var wall = function() {  //獲取相冊圖片集合  var $imgs = $('.img-item');  //遍歷圖片集合修改top值  $.each($imgs, function(index, el) {    //計(jì)算當(dāng)前列數(shù)    var currColumn = index % columnNumber;    //獲取需要顯示的高度    var size = $('img', el).data('size');    var height = imgWidth / parseInt(size.split('*')[0]) * parseInt(size.split('*')[1])    $(el).css({      width: imgWidth,      left: currColumn * imgWidth,      top: data[currColumn]    });    //如果需要動畫可以使用$(el).animate    data[currColumn] += height;    //本來這里只需要+=$(el).height()就可以解決,但是初始化時(shí)有些問題未解決  });};

$(window).resize(function(event) {   //重置窗口寬度   $mainWidth = $(window).width();   //重置可顯示的列數(shù)   columnNumber = Math.floor($mainWidth / imgWidth);   //動態(tài)修改#main相冊包裹層的寬度,使整個(gè)相冊看起來一直居中   $main.css({     width: imgWidth * columnNumber   });   //重置top信息   for (var i = 0; i < columnNumber; i++) {     data[i] = 0;   }   wall(); });