基于jquery實(shí)現(xiàn)瀑布流布局
本文實(shí)例為大家介紹了基于jquery實(shí)現(xiàn)瀑布流布局的關(guān)鍵代碼,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
具體代碼:
使用jquery-1.8.3.min.js,waterfall.js代碼如下:
$( window ).load( function(e){ waterfall(); var dataInt = { 'data': [{ 'src': '1.jpg' },{ 'src': '2.jpg' },{ 'src': '3.jpg' },{ 'src': '4.jpg' }]}; $(window).scroll(function(){ if( checkscrollside() ){ $.each( dataInt.data, function(index,value){ var $oPin = $('<div>').addClass('pin').appendTo( $("#main") ); var $oBox = $('<div>').addClass('box').appendTo( $oPin ); $('<img>').attr('src','./images/' + $(value).attr('src')).appendTo( $oBox ); }); waterfall(); } }); function waterfall(){ var $aPin = $( "#main>div" ); var iPinW = $aPin.eq(0).outerWidth(); var num = Math.floor( $(window).width() / iPinW ); $( "#main" ).css({ 'width' : iPinW * num, 'margin' : '0 auto' }); var pinHArr = []; $aPin.each(function( index, value ){ var pinH = $aPin.eq( index ).height(); if( index < num ){ pinHArr[ index ] = pinH; }else{ var minH = Math.min.apply( null, pinHArr ); var minHIndex = $.inArray( minH, pinHArr ); $( value ).css({ 'position': 'absolute', 'top': minH + 15, 'left': $aPin.eq( minHIndex ).position().left }); pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15; } }); } function checkscrollside(){ var $aPin = $("#main>div"); var lastPinH = $aPin.last().get(0).offsetTop + Math.floor( $aPin.last().height()/2); var scrollTop = $( window ).scrollTop(); var documentH = $( document ).height(); return (lastPinH < scrollTop + documentH ) ? true : false; } });
希望本文所述對(duì)大家學(xué)習(xí)有所幫助,謝謝大家的閱讀。
- jQuery Masonry瀑布流布局神器使用詳解
- jquery實(shí)現(xiàn)簡單的瀑布流布局
- 網(wǎng)頁瀑布流布局jQuery實(shí)現(xiàn)代碼
- jQuery實(shí)現(xiàn)瀑布流布局詳解(PC和移動(dòng)端)
- jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
- Jquery實(shí)現(xiàn)瀑布流布局(備有詳細(xì)注釋)
- jQuery實(shí)現(xiàn)瀑布流布局
- jQuery 瀑布流 絕對(duì)定位布局(二)(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動(dòng)布局(一)(延遲AJAX加載圖片)
- JQuery實(shí)現(xiàn)簡單瀑布流布局
相關(guān)文章
使用jQuery內(nèi)容過濾選擇器選擇元素實(shí)例講解
內(nèi)容過濾選擇器:根據(jù)元素中的文字內(nèi)容或所包含的子元素特征獲取元素,其文字內(nèi)容可以模糊或絕對(duì)匹配進(jìn)行元素定位,接下來為大家詳細(xì)介紹下jQuery選擇器,感興趣的朋友可以參考下哈2013-04-04基于jquery實(shí)現(xiàn)狀態(tài)限定編輯的代碼
基于jquery實(shí)現(xiàn)狀態(tài)限定編輯的代碼,需要的朋友可以參考下2012-02-02jquery心形點(diǎn)贊關(guān)注效果的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨query心形點(diǎn)贊關(guān)注效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11jQuery分頁插件jquery.pagination.js使用方法解析
這篇文章主要為大家詳細(xì)解析了jQuery分頁插件jquery.pagination使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02從JavaScript 到 JQuery (1)學(xué)習(xí)小結(jié)
本人使用JavaScript 已經(jīng)有2年左右的時(shí)間了,一直被它簡潔優(yōu)雅的代碼所吸引, 近期接觸了 JQuery這個(gè)庫 , 感覺還不錯(cuò), 但是并不意味著要舍棄 JavaScript , 而是更宣揚(yáng)結(jié)合使用 .2009-02-02DIV隨滾動(dòng)條滾動(dòng)而滾動(dòng)的實(shí)現(xiàn)代碼【推薦】
下面小編就為大家?guī)硪黄狣IV隨滾動(dòng)條滾動(dòng)而滾動(dòng)實(shí)現(xiàn)代碼【推薦】。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04解決Jquery load()加載GB2312頁面時(shí)出現(xiàn)亂碼的兩種方案
jquery的字符集是utf-8,load方法加載完GB2312編碼靜態(tài)頁面后,出現(xiàn)中文亂碼,可以通過將兩個(gè)頁面的編碼格式轉(zhuǎn)換成utf8的方法來解決,具體如下,感興趣的朋友可以參考下2013-09-09