這篇文章主要為大家展示了“jQuery圖片瀑布流的簡單實(shí)現(xiàn)代碼”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“jQuery圖片瀑布流的簡單實(shí)現(xiàn)代碼”這篇文章吧。

創(chuàng)新互聯(lián)主營思南網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app開發(fā),思南h5重慶小程序開發(fā)公司搭建,思南網(wǎng)站營銷推廣歡迎思南等地區(qū)企業(yè)咨詢

具體內(nèi)容如下

注意:本篇文章基于知道每張圖片的實(shí)際尺寸的情況下
特點(diǎn):列數(shù)自適應(yīng),圖片寬度固定

已知BUG:

像本案例中的剛好5張圖片循環(huán)顯示且只有5列的情況下會有問題,解決辦法就是給予樣式的時(shí)候不按順序,而是先將圖片放在top值最低的列

1.預(yù)備

1.基礎(chǔ)html

<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>

新建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個(gè)空間
for (var i = 0; i < columnNumber; i++) {
  data[i] = 0;
}

2.主體

//
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í)有些問題未解決
  });
};

3.窗體大小改變事件

$(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();
 });

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

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

網(wǎng)站題目：jQuery圖片瀑布流的簡單實(shí)現(xiàn)代碼-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://chinadenli.net/article8/cohoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、域名注冊、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)