一行JavaScript代碼如何實現(xiàn)瀑布流布局
寫在前面
一行 JavaScript 代碼究竟可以完成什么布局？今天我們就來用一行 JavaScript 代碼完成經(jīng)典布局的一種，瀑布流布局。
所謂的瀑布流布局就是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。
瀑布流的特點:
- 琳瑯滿目: 整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。
- 唯美: 圖片的風(fēng)格以唯美的圖片為主。
- 操作簡單: 在瀏覽網(wǎng)站的時候，只需要輕輕滑動一下鼠標(biāo)滾輪,一切的美妙的圖片精彩便可呈現(xiàn)在你面前。
效果圖如下所示
當(dāng)然了 這個樣式使用原生 JS 一行代碼肯定是不能完成的，這就需要今天的主角登場了：Masonry 插件閃亮登場！?。。?！
Masonry 插件是什么
Masonry是 jQuery 實現(xiàn)瀑布流布局的插件，可以把 Masonry 看做是 CSS 的浮動布局。
無論排列的元素是水平浮動的還是垂直浮動的，Masonry都是根據(jù)網(wǎng)格先垂直排列元素，再水平排列元素，就像修墻一樣。
配置 Masonry 相當(dāng)簡單，只需要在 jQuery 腳本中簡單的使用.masonry()方法來包裝容器元素。根據(jù)具體布局效果，可能需要制定一個選項。
Masonry 插件的使用方法
1、引入 masonry 插件：masonry 插件的使用是依賴于 jQuery 的，所以必須按照順序進(jìn)行引入：
<!-- 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)
- 定義一個容器元素
- 在容器元素中所有元素呈現(xiàn)瀑布流效果
示例代碼如下所示
<div id="container"> <img class="grid-item" src="./imgs/1.png"> </div>
定位瀑布流布局的容器元素，并調(diào)用 masonry() 核心方法
masonry() 核心方法的簡單應(yīng)用
masonry() 核心方法的簡單用法，傳入一個 options 參數(shù),該參數(shù)具有兩個可選項
- itemSelector : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項元素(選擇器)
- columnWidth ： 一列的寬度，如果默認(rèn)的話是第一個項目寬度
示例代碼如下所示：
$('#container').masonry({
// itemSelector : 默認(rèn)值是 .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 : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項元素(選擇器)
itemSelector: '.grid-item'
})
</script>
</body>
</html>
最終執(zhí)行的結(jié)果如上圖。
哈哈哈 最終還是一行 JS 代碼
$('#container').masonry({itemSelector: '.grid-item'})
到此這篇關(guān)于JavaScript代碼如何實現(xiàn)瀑布流布局的文章就介紹到這了,更多相關(guān)JS實現(xiàn)瀑布流布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)消息框彈出動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
第一次接觸神奇的Bootstrap菜單和Bootstrap導(dǎo)航，Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-08-08
淺析JavaScript中break、continue和return的區(qū)別
javascript中關(guān)于break,continue的特殊用法與介紹
Django模板繼承 extend標(biāo)簽實例代碼詳解
uniapp實現(xiàn)點擊出現(xiàn)彈窗功能實例
javascript-解決mongoose數(shù)據(jù)查詢的異步操作