欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一行JavaScript代碼如何實(shí)現(xiàn)瀑布流布局

 更新時(shí)間：2020年12月11日 09:53:27   作者：is_sweet  
這篇文章主要給大家介紹了如何通過(guò)一行JavaScript代碼實(shí)現(xiàn)瀑布流布局的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

寫在前面

一行 JavaScript 代碼究竟可以完成什么布局？今天我們就來(lái)用一行 JavaScript 代碼完成經(jīng)典布局的一種，瀑布流布局。
所謂的瀑布流布局就是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。

瀑布流的特點(diǎ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 插件的使用是依賴于 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)文章

最新評(píng)論