乱人伦八区,日韩激情抽插久久,久夜夜躁婷婷AV蜜桃

純 css 寫瀑布流

1.multi-columns 方式：

通過 Multi-columns 相關的屬性 column-count、column-gap 配合 break-inside 來實現(xiàn)瀑布流布局。

html代碼

<div class="masonry"> 
            <div class="item"> 
                <div class="item_content content-lar"> 1
                </div> 
            </div> 
            <div class="item"> 
                <div class="item_content content-sma"> 2
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 3
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-sma"> 4
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 5
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 6
                </div> 
            </div> 
            <div class="item"> 
                <div class="item_content content-sma"> 7
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 8
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-lar"> 9
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-sma"> 10
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 11
                </div> 
            </div>
            <div class="item"> 
                <div class="item_content content-mid"> 12
                </div> 
            </div>
            <!-- more items --> 
        </div>

.masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中設置 column-count（列數(shù)）和 column-gap（列間距）

item 中設置 break-inside:avoid，這是為了控制文本塊分解成單獨的列，以免項目列表的內(nèi)容跨列，破壞整體的布局。

在 css 中設置包裹 masonry 和 item 的屬性樣式：

.masonry { 
                -moz-column-count:3; /* Firefox */
                -webkit-column-count:3; /* Safari 和 Chrome */
                column-count:3;
                -moz-column-gap: 2em;
                -webkit-column-gap: 2em;
                column-gap: 2em;
                width: 80%;
                margin:2em auto;
            }
            .item { 
                padding: 2em;
                margin-bottom: 2em;
                -moz-page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                break-inside: avoid;
                background: #f60;
            }

當然為了布局具有響應式效果，可以借助媒體查詢屬性，在不同屏幕大小的條件下設置瀑布流容器 masonry 的 column-count 來自適應改變列數(shù)：

@media screen and (max-width: 800px) { 
                .masonry { 
                    column-count: 2; // two columns on larger phones 
                } 
            } 
            @media screen and (max-width: 500px) { 
                .masonry { 
                    column-count: 1; // two columns on larger phones 
                } 
            }

那么所產(chǎn)生的效果是：

image.png

也是根據(jù)屏幕大小自適應改變列數(shù)

2.flexbox 方式：

html 的結(jié)構(gòu)依舊和上面的 Multi-columns 展示的一樣。只是在 .masonry 容器中使用的 CSS 不一樣：

在 .masonry 中是通過采用 flex-flow 來控制列，并且允許它換行。

這里關鍵是容器的高度，我這里要顯式的設置 height 屬性，當然除了設置 px 值，還可以設置100vh，讓 .masonry 容器的高度和瀏覽器視窗高度一樣。

記住，這里height可以設置成任何高度值（采用任何的單位），但不能不顯式的設置，如果沒有顯式的設置，容器就無法包裹住項目列表。

.masonry { 
                height: 800px;
                display: flex; 
                flex-flow: column wrap;
                width: 80%;
                margin:2em auto;
            }

對于 .item，可以不再使用 break-inside:avoid，但其它屬性可以是一樣。

同樣的，響應式設置，使用 Flexbox 實現(xiàn)響應式布局比多列布局 Multi-columns 要來得容易，他天生就具備這方面的能力，只不過我們這里需要對容器的高度做相關的處理。

前面也提到過了，如果不給 .masonry 容器顯式設置高度是無法包裹項目列表的，那么這里響應式設計中就需要在不同的媒體查詢條件下設置不同的高度值：

@media screen and (max-width: 1100px) { 
                .masonry { 
                    height: 800px; 
                } 
            }
            @media screen and (max-width: 800px) {
                .masonry { 
                    height: 1100px; 
                } 
            } 
            @media screen and (max-width: 600px) { 
                .masonry { 
                    height: 1300px; 
                } 
            } 
            @media screen and (max-width: 460px) { 
                .masonry { 
                    height: 1600px;
                } 
            }

那么所產(chǎn)生的效果是：

image.png

也是根據(jù)屏幕大小自適應改變列數(shù)。

看到這里，我們可以發(fā)現(xiàn)，使用純 css 寫瀑布流，每一塊 item 都是從上往下排列，不能做到從左往右排列

image.png

這樣子若是動態(tài)加載圖片的瀑布流，體驗就會很不好

我們想要的是這樣：

image.png

這樣做只能通過 js 來寫瀑布流

js 寫瀑布流：

這里我直接把自己做的項目拿過來了，做了適當修改

<div class="layui-tab-content" style="padding:0px;">

      <!-- 評論 -->
      <div class="layui-tab-item layui-show">
        <div class="comment-list flex" style="padding-top:10px;padding-bottom:20px;background:#e7e7e7;">
            <ul>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/8.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>

              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/5.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>

              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/7.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/6.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/4.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>


              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/5.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              
              
              </li>
              <li>
                <a href="/detail_c?id=13634">
                  <div class="pic"><img src="./images/3.jpg"></div>
                  <div class="txt">
                    <div class="title">我是標題我是標題我是標題我是標題我是標題我是標題我是標題我是標題</div>
                    <div class="site flex">
                      <div class="headPic">
                        <img src="./images/1.jpg" alt="" width="24" height="24">
                      </div>
                      <div class="info">
                        <div class="name">我是姓名我是姓名</div>
                        <div class="date flex">
                          <div>5月12</div>
                          <div><span class="iconfont">
                              <!-- 找個眼睛的icon --></span>12次</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              
              
              </li>
            </ul>
        <div style="text-align:center;"><a style="color:#fa923a;font-weight: bold;"
            href="/channel/assemble">【查看更多拼團】</a>
        </div>
      </div>
      </div>
    </div>

css 內(nèi)容：

.comment-list {
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 20px;
  background: #e7e7e7;
}
.comment-list ul {
  padding: 0 10px 10px;
  width: 100%;
  position: relative;
}
.comment-list ul li {
  background: #fff;
  border-radius: 5px;
  padding: 8px;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: 0.25s;
  overflow: hidden;
  position: absolute;
}

.comment-list ul li .pic {
  margin-bottom: 10px;
}
.comment-list ul li .pic > img {
  width: 100%;
  height: auto;
}
.comment-list ul li .title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}
.comment-list ul li .headPic > img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 5px;
}
.comment-list ul li .info {
  font-size: 9px;
  line-height: 1.5;
  flex-grow: 1;
  color: #666;
}
.comment-list ul li .info .date {
  flex-wrap: nowrap;
  justify-content: space-between;
}

js 瀑布流實現(xiàn)方式：

css 的絕對定位方式：根據(jù)每張圖片的位置設置 top 和 left 值：

//瀑布流效果
  //這里有一個坑（已經(jīng)修復）：
  //因為是動態(tài)加載遠程圖片，在未加載完全無法獲取圖片寬高
  //未加載完全就無法設定每一個item(包裹圖片)的top。

  //item的top值：第一行：top為0
  //            其他行：必須算出圖片寬度在item寬度的縮小比例，與獲取的圖片高度相乘，從而獲得item的高度
  //                   就可以設置每張圖片在瀑布流中每塊item的top值（每一行中最小的item高度，數(shù)組查找）
  //item的left值：第一行：按照每塊item的寬度值*塊數(shù)
  //             其他行：與自身上面一塊的left值相等
  function waterFall() {
    // 1- 確定圖片的寬度 - 滾動條寬度
    pageWidth = $(".comment-list ul").width();//父盒子寬度
    var columns = 2; //2列
    var rowSpaces = 10; //每列的間隙
    var colSpaces = 10; //每行的間隙
    var itemWidth = parseInt((pageWidth - rowSpaces) / columns); //得到item的寬度
    $(".comment-list ul li").innerWidth(itemWidth); //設置到item的寬度
    
    var arr = [];

    $(".comment-list ul li").each(function (i) {
      var height = $(this).outerHeight();

      var width = $(this).outerWidth();

      var bi = itemWidth / width; //獲取縮小的比值
      var boxheight = parseInt(height * bi) + colSpaces; //圖片的高度*比值 = item的高度。boxheight是下個item的top值
      if (i < columns) {
        // 2- 確定第一行
        $(this).css({
          top: 0,
          left: (itemWidth) * i + rowSpaces*(i+1)
        });
        arr.push(boxheight);

      } 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- 設置下一行的第一個盒子位置
        // top值就是最小列的高度 
        $(this).css({
          top: arr[index],
          left: $(".comment-list ul li").eq(index).css("left")
        });

        // 5- 修改最小列的高度 
        // 最小列的高度 = 當前自己的高度 + 拼接過來的高度
        arr[index] = arr[index] + boxheight;
       }
        $('.comment-list ul').css('minHeight', Math.max.apply(null, arr)); 
    });
  }


  //clientWidth 處理兼容性
  function getClient() {
    return {
      width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
      height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
  }



  // 頁面尺寸改變時實時觸發(fā)
  window.onresize = function () {
    //重新定義瀑布流
    waterFall();
  };



  //初始化
  window.onload = function () {

    //實現(xiàn)瀑布流
    waterFall();

  }

效果圖是：

111.png

這實現(xiàn)了橫向排列的瀑布流效果

參考：https://www.cnblogs.com/ainyi/p/8766281.html

注意事項：原文可以實現(xiàn)效果，但是實際項目中，元素會有內(nèi)邊距，外邊距，這樣會影響布局，這里我做了一點點小改動。還有一點，設置到item的寬度,這里需要用innerWidth()，li元素可能是有內(nèi)邊距的，注意innerWidth()賦值需要引入JQ文件版本在1.8以上

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

純css 和 js瀑布流布局（轉(zhuǎn)）

純css 和 js瀑布流布局（轉(zhuǎn)）

1.multi-columns 方式：

2.flexbox 方式：

js 寫瀑布流：

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

純css 和 js瀑布流布局（轉(zhuǎn)）

1.multi-columns 方式：

2.flexbox 方式：

js 寫瀑布流：

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av