古之立大事者，不惟有超世之才，亦必有堅韌不拔之志——蘇軾
寫在前面
一行 JavaScript 代碼究竟可以完成什么布局？今天我們就來用一行 JavaScript 代碼完成經典布局的一種，瀑布流布局，
所謂的瀑布流布局就是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載資料塊并附加至當前尾部，
瀑布流的特點:
- 琳瑯滿目: 整版以圖片為主，大小不一的圖片按照一定的規律排列，
- 唯美: 圖片的風格以唯美的圖片為主，
- 操作簡單: 在瀏覽網站的時候，只需要輕輕滑動一下滑鼠滾輪,一切的美妙的圖片精彩便可呈現在你面前，
效果圖如下所示
當然了 這個樣式使用原生 JS 一行代碼肯定是不能完成的，這就需要今天的主角登場了：Masonry 插件閃亮登場！！！！！
Masonry 插件是什么
Masonry是 jQuery 實作瀑布流布局的插件，可以把 Masonry 看做是 CSS 的浮動布局，
無論排列的元素是水平浮動的還是垂直浮動的，Masonry都是根據網格先垂直排列元素，再水平排列元素，就像修墻一樣，
配置 Masonry 相當簡單，只需要在 jQuery 腳本中簡單的使用.masonry()方法來包裝容器元素，根據具體布局效果，可能需要制定一個選項，
Masonry 插件的使用方法
-
引入 masonry 插件：masonry 插件的使用是依賴于 jQuery 的，所以必須按照順序進行引入：
<!-- 1. 引入 jQuery 檔案 --> <script src="./library/jQuery 1.12.4.js"></script> <!-- 引入 masonry 插件 --> <script src="./library/masonry/masonry.pkgd.js"></script> -
HTML 頁面結構
- 定義一個容器元素
- 在容器元素中所有元素呈現瀑布流效果
示例代碼如下所示
<div id="container"> <img class="grid-item" src="./imgs/1.png"> </div> -
定位瀑布流布局的容器元素，并呼叫
masonry()核心方法
masonry() 核心方法的簡單應用
masonry() 核心方法的簡單用法，傳入一個 options 引數,該引數具有兩個可選項
itemSelector: 默認值是.item，指定哪些子元素將用作布局中的項元素(選擇器)columnWidth： 一列的寬度，如果默認的話是第一個專案寬度
示例代碼如下所示：
$('#container').masonry({
// itemSelector : 默認值是 .item ，指定哪些子元素將用作布局中的項元素(選擇器)
itemSelector: '.grid-item'
})
測驗 dome
示例代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局插件</title>
<!-- 1. 引入 jQuery 檔案 -->
<script src="./library/jQuery 1.12.4.js"></script>
<!-- 引入 masonry 插件 -->
<script src="./library/masonry/masonry.pkgd.js"></script>
<style>
img {
display: block;
width: 300px;
margin: 5px;
float: left;
}
#container {
width: 940px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<img class="grid-item" src="./imgs/1.png">
<img class="grid-item" src="./imgs/2.png">
<!--此處省略若干行圖片-->
<img class="grid-item" src="./imgs/9.png">
<img class="grid-item" src="./imgs/10.png">
</div>
<script>
$('#container').masonry({
// itemSelector : 默認值是 .item ，指定哪些子元素將用作布局中的項元素(選擇器)
itemSelector: '.grid-item'
})
</script>
</body>
</html>
最終執行的結果如上圖，
哈哈哈 最侄訓是一行 JS 代碼
$('#container').masonry({itemSelector: '.grid-item'})
寫在最后
這篇博客主要介紹的是 Masonry 插件功能以及簡單用法，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/211669.html
標籤：python