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

jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局【推薦】

 更新時(shí)間：2017年03月08日 14:37:33   作者：小結(jié)巴巴吧  
本文主要介紹了jquery實(shí)現(xiàn)超簡(jiǎn)單的瀑布流布局的實(shí)例，代碼簡(jiǎn)單，容易修改。下面跟著小編一起來看下吧

1.看看效果吧！

2.html代碼index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto}
 li{width: 33.33%;position: absolute;box-sizing: border-box;display: block; }
 img{width: 100%;height: auto;display: block;}
 </style>
 <script src="./jquery-1.12.4.min.js"></script>
</head>
<body style="background: #000">
 <ul class="flowLayout-box">
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u17.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>
 </ul>
</body>
</html>

3.插件代碼

(function ($) {
 $.fn.flowLayout = function(options) {
 var dft = {
 gapWidth:16, //間隙
 gapHeight:16, //間歇
 column:3 //列
 };
 var ops = $.extend(dft,options);
 var _this = $(this);
 _this.width((_this.parents('.flowLayout-box').width()-2*ops.gapWidth)/3)
 var _pWidth=_this.parents('.flowLayout-box').width();
 $(".flowLayout-box").css({
 'opacity':0
 });
 var columnHeight=[],columnIndex=0;
 for (var i=0 ;i<ops.column;i++){
 columnHeight.push(0);
 }
 setTimeout(function () {
 for(var j =0 ; j< _this.length ;j++){
 console.log(columnHeight[columnIndex]);
 $(_this).eq(j).css({
 'top':columnHeight[columnIndex]+ops.gapHeight+'px',
 'left':_pWidth*columnIndex/3+'px'
 })
 columnHeight[columnIndex]+=$(_this).eq(j).height()+ops.gapHeight
 columnIndex=getIndex();
 }
 },50)
 function getIndex() {
 var columnIndex=0,maxHeight=0;
 for(var i =0 ;i < columnHeight.length ;i++){
 if(columnHeight[i]<columnHeight[columnIndex]){
 columnIndex=i;
 }
 if(columnHeight[i]>maxHeight){
 maxHeight=columnHeight[i]
 }
 }
 $(".flowLayout-box").css({
 'opacity':1,
 'height':maxHeight
 });
 return columnIndex;
 }
 }
 })(jQuery);　

4.調(diào)用代碼

$(function () {
 $('.flowLayout-box li').flowLayout({});
 })

代碼簡(jiǎn)單，容易修改，，拿去用吧。。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

  • JQuery魔力之$("tagName")與selector

    JQuery魔力之$("tagName")與selector

    DOM 中的 getElementsByTagName()方法在JQuery中的表現(xiàn)就是$(“tagName”)這么簡(jiǎn)單！tag標(biāo)簽（可以是：p、div、button …）標(biāo)簽本身具有ID、Class等屬性
    2012-03-03
  • jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能示例

    jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能示例

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單動(dòng)態(tài)添加、刪除表格功能,涉及jQuery事件響應(yīng)及表格元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2017-09-09
  • jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題

    jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題

    這篇文章主要介紹了jQuery解決input元素的blur事件和其他非表單元素的click事件沖突問題,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2016-08-08
  • jQuery的deferred對(duì)象詳解

    jQuery的deferred對(duì)象詳解

    開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時(shí)很長(zhǎng)的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個(gè)大型數(shù)組），它們都不是立即能得到結(jié)果的。
    2014-11-11
  • 適用于手機(jī)端的jQuery圖片滑塊動(dòng)畫

    適用于手機(jī)端的jQuery圖片滑塊動(dòng)畫

    這篇文章主要為大家分享了適應(yīng)手機(jī)端的jQuery圖片滑塊動(dòng)畫,不僅在PC瀏覽器上可以使用，而且更適合在手機(jī)端的網(wǎng)頁中使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-12-12
  • 老生常談JQuery data方法的使用

    老生常談JQuery data方法的使用

    下面小編就為大家?guī)硪黄仙Ｕ凧Query data方法的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-09-09
  • jQuery 獲取對(duì)象 定位子對(duì)象

    jQuery 獲取對(duì)象 定位子對(duì)象

    jQuery 獲取對(duì)象 定位子對(duì)象，學(xué)習(xí)jquery 定位子對(duì)象的朋友可以參考下。
    2010-05-05
  • jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例

    jQuery函數(shù)的等價(jià)原生函數(shù)代碼示例

    原生方法明顯要比jQuery方法快，因?yàn)閖Query方法要處理瀏覽器兼容以及其他一些事情，如果你針對(duì)的是現(xiàn)代瀏覽器，那么使用原生方法會(huì)使性能有很大的提升
    2013-05-05
  • 10個(gè)基于jQuery或JavaScript的WYSIWYG 編輯器整理

    10個(gè)基于jQuery或JavaScript的WYSIWYG 編輯器整理

    10驚人的自由豐富的文本編輯器，將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個(gè)非jQuery實(shí)時(shí)評(píng)價(jià)附帶簡(jiǎn)單的功能，具有辦公一樣的功能。
    2010-05-05
  • jQuery簡(jiǎn)單判斷值是否存在于數(shù)組中的方法示例

    jQuery簡(jiǎn)單判斷值是否存在于數(shù)組中的方法示例

    這篇文章主要介紹了jQuery簡(jiǎn)單判斷值是否存在于數(shù)組中的方法,涉及jQuery數(shù)組遍歷及基于$.inArray的元素判斷相關(guān)操作技巧,需要的朋友可以參考下
    2018-04-04

最新評(píng)論