新建html文件,然后將#main下一層的代碼多拷貝幾次,畢竟圖片多才能體現(xiàn)瀑布流的作用

2.基礎(chǔ)css

#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;
}

2.開始

1.聲明

//獲取圖片列表包裹層
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個空間
for (var i = 0; i < columnNumber; i++) {
  data[i] = 0;
}

2.主體

//
var wall = function() {
  //獲取相冊圖片集合
  var $imgs = $('.img-item');
  //遍歷圖片集合修改top值
  $.each($imgs, function(index, el) {
    //計算當(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()就可以解決,但是初始化時有些問題未解決
  });
};

3.窗體大小改變事件

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

以上是“jQuery圖片瀑布流的簡單實現(xiàn)代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。