寫在前面
一行 JavaScript 代碼究竟可以完成什么布局？今天我們就來用一行 JavaScript 代碼完成經(jīng)典布局的一種，瀑布流布局。
所謂的瀑布流布局就是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。
瀑布流的特點(diǎn):
- 琳瑯滿目: 整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。
- 唯美: 圖片的風(fēng)格以唯美的圖片為主。
- 操作簡單: 在瀏覽網(wǎng)站的時(shí)候，只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪,一切的美妙的圖片精彩便可呈現(xiàn)在你面前。
效果圖如下所示
當(dāng)然了 這個(gè)樣式使用原生 JS 一行代碼肯定是不能完成的，這就需要今天的主角登場了：Masonry 插件閃亮登場！！！！！
Masonry 插件是什么
Masonry是 jQuery 實(shí)現(xiàn)瀑布流布局的插件，可以把 Masonry 看做是 CSS 的浮動(dòng)布局。
無論排列的元素是水平浮動(dòng)的還是垂直浮動(dòng)的，Masonry都是根據(jù)網(wǎng)格先垂直排列元素，再水平排列元素，就像修墻一樣。
配置 Masonry 相當(dāng)簡單，只需要在 jQuery 腳本中簡單的使用.masonry()方法來包裝容器元素。根據(jù)具體布局效果，可能需要制定一個(gè)選項(xiàng)。
Masonry 插件的使用方法
1、引入 masonry 插件：masonry 插件的使用是依賴于 jQuery 的，所以必須按照順序進(jìn)行引入：
|
1
2
3
4
|
<!-- 1. 引入 jQuery 文件 --><script src="./library/jQuery 1.12.4.js"></script><!-- 引入 masonry 插件 --><script src="./library/masonry/masonry.pkgd.js"></script> |
2、HTML 頁面結(jié)構(gòu)
- 定義一個(gè)容器元素
- 在容器元素中所有元素呈現(xiàn)瀑布流效果
示例代碼如下所示
|
1
2
3
|
<div id="container"> <img class="grid-item" src="./imgs/1.png"></div> |
定位瀑布流布局的容器元素，并調(diào)用 masonry() 核心方法
masonry() 核心方法的簡單應(yīng)用
masonry() 核心方法的簡單用法，傳入一個(gè) options 參數(shù),該參數(shù)具有兩個(gè)可選項(xiàng)
- itemSelector : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項(xiàng)元素(選擇器)
- columnWidth ： 一列的寬度，如果默認(rèn)的話是第一個(gè)項(xiàng)目寬度
示例代碼如下所示：
|
1
2
3
4
|
$('#container').masonry({ // itemSelector : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項(xiàng)元素(選擇器) itemSelector: '.grid-item'}) |
測試 dome
示例代碼如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!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 : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項(xiàng)元素(選擇器) itemSelector: '.grid-item' }) </script></body></html> |
最終執(zhí)行的結(jié)果如上圖。
哈哈哈 最終還是一行 JS 代碼
|
1
|
$('#container').masonry({itemSelector: '.grid-item'}) |
到此這篇關(guān)于JavaScript代碼如何實(shí)現(xiàn)瀑布流布局的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)瀑布流布局內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/weixin_46163658/article/details/109567809
