利用JavaScript怎么實(shí)現(xiàn)一個(gè)瀑布流布局-創(chuàng)新互聯(lián)

利用JavaScript怎么實(shí)現(xiàn)一個(gè)瀑布流布局？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為韶關(guān)等服務(wù)建站，韶關(guān)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為韶關(guān)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

一、JS 實(shí)現(xiàn)瀑布流

思路分析

1、瀑布流布局的特點(diǎn)是等寬不等高。
2、為了讓最后一行的差距最小，從第二行開(kāi)始，需要將圖片放在第一行最矮的圖片下面，以此類推。
3、父元素設(shè)置為相對(duì)定位，圖片所在元素設(shè)置為絕對(duì)定位。然后通過(guò)設(shè)置 top 值和 left 值定位每個(gè)元素。

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
 <style>
  .box {
   width: 100%;
   position:relative;
  }
  .item {
   position: absolute;
  }
  .item img{
   width: 100%;
   height:100%;
  }
 </style>
</head>
<body>
<div class="box">
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
 function waterFall() {
  // 1 確定圖片的寬度 - 滾動(dòng)條寬度
  var pageWidth = getClient().width-8;
  var columns = 3; //3列
  var itemWidth = parseInt(pageWidth/columns); //得到item的寬度
  $(".item").width(itemWidth); //設(shè)置到item的寬度
  var arr = [];
  $(".box .item").each(function(i){
   var height = $(this).find("img").height();
   if (i < columns) {
    // 2 第一行按序布局
    $(this).css({
     top:0,
     left:(itemWidth) * i+20*i,
    });
    //將行高push到數(shù)組
    arr.push(height);
   } else {
    // 其他行
    // 3 找到數(shù)組中最小高度 和 它的索引
    var minHeight = arr[0];
    var index = 0;
    for (var j = 0; j < arr.length; j++) {
     if (minHeight > arr[j]) {
      minHeight = arr[j];
      index = j;
     }
    }
    // 4 設(shè)置下一行的第一個(gè)盒子位置
    // top值就是最小列的高度
    $(this).css({
     top:arr[index]+30,//設(shè)置30的距離
     left:$(".box .item").eq(index).css("left")
    });

    // 5 修改最小列的高度
    // 最小列的高度 = 當(dāng)前自己的高度 + 拼接過(guò)來(lái)的高度
    arr[index] = arr[index] + height+30;//設(shè)置30的距離
   }
  });
 }
 //clientWidth 處理兼容性
 function getClient() {
  return {
   width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
   height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  }
 }
 // 頁(yè)面尺寸改變時(shí)實(shí)時(shí)觸發(fā)
 window.onresize = function() {
  //重新定義瀑布流
  waterFall();
 };
 //初始化
 window.onload = function(){
  //實(shí)現(xiàn)瀑布流
  waterFall();
 }
</script>
</html>

效果如下

利用JavaScript怎么實(shí)現(xiàn)一個(gè)瀑布流布局

二、column 多行布局實(shí)現(xiàn)瀑布流

思路分析：

column 實(shí)現(xiàn)瀑布流主要依賴兩個(gè)屬性。
一個(gè)是 column-count 屬性，是分為多少列。
一個(gè)是 column-gap 屬性，是設(shè)置列與列之間的距離。

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
 <style>
  .box {
   margin: 10px;
   column-count: 3;
   column-gap: 10px;
  }
  .item {
   margin-bottom: 10px;
  }
  .item img{
   width: 100%;
   height:100%;
  }
 </style>
</head>
<body>
<div class="box">
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
</div>
</body>

效果如下：

利用JavaScript怎么實(shí)現(xiàn)一個(gè)瀑布流布局

三、flex 彈性布局實(shí)現(xiàn)瀑布流

思路分析：

flex 實(shí)現(xiàn)瀑布流需要將最外層元素設(shè)置為 display: flex，即橫向排列。然后通過(guò)設(shè)置 flex-flow:column wrap 使其換行。設(shè)置 height: 100vh 填充屏幕的高度，來(lái)容納子元素。每一列的寬度可用 calc 函數(shù)來(lái)設(shè)置，即 width: calc(100%/3 - 20px)。分成等寬的 3 列減掉左右兩遍的 margin 距離。

代碼實(shí)現(xiàn)：

<!DOCTYPE html>
<html>
<head>
 <style>
  .box {
   display: flex; 
   flex-flow:column wrap;
   height: 100vh;
  }
  .item {
   margin: 10px;
   width: calc(100%/3 - 20px);
  }
  .item img{
   width: 100%;
   height:100%;
  }
 </style>
</head>
<body>
<div class="box">
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="show.jpg" alt="" />
 </div>
 <div class="item">
  <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
  <img src="banner.jpg" alt="" />
 </div>
</div>
</body>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

當(dāng)前名稱：利用JavaScript怎么實(shí)現(xiàn)一個(gè)瀑布流布局-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)URL：http://chinadenli.net/article4/hjjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、App設(shè)計(jì)、微信公眾號(hào)、虛擬主機(jī)

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

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

利用JavaScript怎么實(shí)現(xiàn)一個(gè)瀑布流布局-創(chuàng)新互聯(lián)