一行JavaScript代碼如何實(shí)現(xiàn)瀑布流布局
寫(xiě)在前面
一行 JavaScript 代碼究竟可以完成什么布局？今天我們就來(lái)用一行 JavaScript 代碼完成經(jīng)典布局的一種，瀑布流布局。
所謂的瀑布流布局就是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。
瀑布流的特點(diǎn):
- 琳瑯滿(mǎn)目: 整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。
- 唯美: 圖片的風(fēng)格以唯美的圖片為主。
- 操作簡(jiǎn)單: 在瀏覽網(wǎng)站的時(shí)候，只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪,一切的美妙的圖片精彩便可呈現(xiàn)在你面前。
效果圖如下所示
當(dāng)然了 這個(gè)樣式使用原生 JS 一行代碼肯定是不能完成的，這就需要今天的主角登場(chǎng)了：Masonry 插件閃亮登場(chǎng)?。。。?！
Masonry 插件是什么
Masonry是 jQuery 實(shí)現(xiàn)瀑布流布局的插件，可以把 Masonry 看做是 CSS 的浮動(dòng)布局。
無(wú)論排列的元素是水平浮動(dòng)的還是垂直浮動(dòng)的，Masonry都是根據(jù)網(wǎng)格先垂直排列元素，再水平排列元素，就像修墻一樣。
配置 Masonry 相當(dāng)簡(jiǎn)單，只需要在 jQuery 腳本中簡(jiǎn)單的使用.masonry()方法來(lái)包裝容器元素。根據(jù)具體布局效果，可能需要制定一個(gè)選項(xiàng)。
Masonry 插件的使用方法
1、引入 masonry 插件：masonry 插件的使用是依賴(lài)于 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 頁(yè)面結(jié)構(gòu)
- 定義一個(gè)容器元素
- 在容器元素中所有元素呈現(xiàn)瀑布流效果
示例代碼如下所示
<div id="container"> <img class="grid-item" src="./imgs/1.png"> </div>
定位瀑布流布局的容器元素，并調(diào)用 masonry() 核心方法
masonry() 核心方法的簡(jiǎn)單應(yīng)用
masonry() 核心方法的簡(jiǎn)單用法，傳入一個(gè) options 參數(shù),該參數(shù)具有兩個(gè)可選項(xiàng)
- itemSelector : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項(xiàng)元素(選擇器)
- columnWidth ： 一列的寬度，如果默認(rèn)的話是第一個(gè)項(xiàng)目寬度
示例代碼如下所示：
$('#container').masonry({
// itemSelector : 默認(rèn)值是 .item ，指定哪些子元素將用作布局中的項(xiàng)元素(選擇器)
itemSelector: '.grid-item'
})
測(cè)試 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 ，指定哪些子元素將用作布局中的項(xiàng)元素(選擇器)
itemSelector: '.grid-item'
})
</script>
</body>
</html>
最終執(zhí)行的結(jié)果如上圖。
哈哈哈 最終還是一行 JS 代碼
$('#container').masonry({itemSelector: '.grid-item'})
到此這篇關(guān)于JavaScript代碼如何實(shí)現(xiàn)瀑布流布局的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)瀑布流布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
刪除javascript中注釋語(yǔ)句的正則表達(dá)式
這篇文章主要介紹了刪除javascript中注釋語(yǔ)句的正則表達(dá)式,需要的朋友可以參考下2014-06-06
document.documentElement的一些使用技巧
documentElement 屬性可返回文檔的根節(jié)點(diǎn)，接下來(lái)為大家詳細(xì)介紹下document.documentElement的一些使用技巧，感興趣的朋友可以參考下哈2013-04-04
javascript數(shù)組對(duì)象的slice方法從數(shù)組中分離出一個(gè)子數(shù)組，功能類(lèi)似于字符串對(duì)象的substring方法。今天我們就來(lái)詳細(xì)探討下javascript的這個(gè)不太常用的slice()方法。2015-04-04
Javascript中字符串replace方法的第二個(gè)參數(shù)探究
當(dāng)我們要把一段字符串中的某些指定字符替換掉，第一時(shí)間想到的就是replace方法，他的用法很簡(jiǎn)單，W3school上講的清晰易懂。網(wǎng)上有關(guān)replace的文章也有很多了，那么這篇這里主要聊聊它的第二個(gè)參數(shù)，下面來(lái)一起看看，注意閱讀本文需要對(duì)replace方法有一定了解。2016-12-12
JS實(shí)現(xiàn)光滑展開(kāi)合攏的菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)光滑展開(kāi)合攏的菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷并改變頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
一步一步封裝自己的HtmlHelper組件BootstrapHelper（二）
一步一步封裝自己的HtmlHelper組件：BootstrapHelper，系列文章第二篇，感興趣的小伙伴們可以參考一下2016-09-09
原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)的簡(jiǎn)單小鐘表功能,涉及javascript結(jié)合定時(shí)器的數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
JavaScript異步回調(diào)的Promise模式封裝實(shí)例
這篇文章主要介紹了JavaScript異步回調(diào)的Promise模式封裝實(shí)例,本文通過(guò)分析easyjs的源碼得出,實(shí)例均參考easyjs,需要的朋友可以參考下2014-06-06
小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化
這篇文章主要為大家詳細(xì)介紹了小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了JS 數(shù)字轉(zhuǎn)換實(shí)現(xiàn)方法，需要的朋友可以參考下2013-12-12