基于jquery實現(xiàn)瀑布流布局
本文實例為大家介紹了基于jquery實現(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; } });
希望本文所述對大家學(xué)習(xí)有所幫助,謝謝大家的閱讀。
相關(guān)文章
基于jquery實現(xiàn)狀態(tài)限定編輯的代碼
基于jquery實現(xiàn)狀態(tài)限定編輯的代碼,需要的朋友可以參考下2012-02-02jquery心形點贊關(guān)注效果的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨query心形點贊關(guān)注效果的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jQuery分頁插件jquery.pagination.js使用方法解析
這篇文章主要為大家詳細解析了jQuery分頁插件jquery.pagination使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02從JavaScript 到 JQuery (1)學(xué)習(xí)小結(jié)
本人使用JavaScript 已經(jīng)有2年左右的時間了,一直被它簡潔優(yōu)雅的代碼所吸引, 近期接觸了 JQuery這個庫 , 感覺還不錯, 但是并不意味著要舍棄 JavaScript , 而是更宣揚結(jié)合使用 .2009-02-02解決Jquery load()加載GB2312頁面時出現(xiàn)亂碼的兩種方案
jquery的字符集是utf-8,load方法加載完GB2312編碼靜態(tài)頁面后,出現(xiàn)中文亂碼,可以通過將兩個頁面的編碼格式轉(zhuǎn)換成utf8的方法來解決,具體如下,感興趣的朋友可以參考下2013-09-09