利用JavaScript實現瀑布流布局的效果代碼

來源：懂視網責編：小OO 時間：2020-11-27 20:22:54

利用JavaScript實現瀑布流布局的效果代碼

先說一下什么是瀑布流布局。就是一堆等寬不等高的數據塊組成的頁面，如圖。現在好多網站都采用這種瀑布流布局，如蘑菇街。美麗說等等。首先要實現它就要明白它是怎樣排列的。每一行的列數都是根據圖片的寬度和頁面的寬度算比例算下來的。第一行就是按順序排列，其他的數據塊都是在每一列中挑選出最低的那一列依次排進去的。首先實現框架。

推薦度：

點擊下載本文 文檔為doc格式

導讀先說一下什么是瀑布流布局。就是一堆等寬不等高的數據塊組成的頁面，如圖。現在好多網站都采用這種瀑布流布局，如蘑菇街。美麗說等等。首先要實現它就要明白它是怎樣排列的。每一行的列數都是根據圖片的寬度和頁面的寬度算比例算下來的。第一行就是按順序排列，其他的數據塊都是在每一列中挑選出最低的那一列依次排進去的。首先實現框架。

這篇文章主要為大家詳細介紹了JavaScript瀑布流布局的實現代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

先說一下什么是瀑布流布局。

就是一堆等寬不等高的數據塊組成的頁面，如圖：

這里寫圖片描述

現在好多網站都采用這種瀑布流布局，如蘑菇街。美麗說等等。
首先要實現它就要明白它是怎樣排列的。
每一行的列數都是根據圖片的寬度和頁面的寬度算比例算下來的。
第一行就是按順序排列，其他的數據塊都是在每一列中挑選出最低的那一列依次排進去的。

首先實現框架。

<p id = "main">
 <p class = "box">
 <p class = "pic">
 <img src = "images/0.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/1.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/2.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/3.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/4.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/5.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/6.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/7.jpg">
 </p>
 </p>

 <p class = "box">
 <p class = "pic">
 <img src = "images/8.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/9.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/10.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/11.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/12.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/13.jpg">
 </p>
 </p>
 <p class = "box">
 <p class = "pic">
 <img src = "images/14.jpg">
 </p>
 </p>
</p>

這里定義了14個圖片，每個圖片都被一個class= box的屬性和class= “pic”的屬性包裹，在css中定義其樣式：

*{
 padding: 0px;
 margin: 0px;
 }

 #main{
 position: relative;

 }
 .box{
/* display: inline-block;*/
 padding: 15px 0px 0px 15px;
 float: left;

 }
 .pic{
 padding: 10px;
 border-radius: 5px;
 border:1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 }

 .pic img{
 width: 165px;
 height: auto;
 }
 </style>

效果圖如下：