您的位置: 首页  >  IT文章  >  jQuery鏃犲埛鏂版棤鍒嗛〉瀹岀編鐎戝竷娴

jQuery鏃犲埛鏂版棤鍒嗛〉瀹岀編鐎戝竷娴

分类: IT文章 • 2024-07-24 19:47:37
jQuery鏃犲埛鏂版棤鍒嗛〉瀹岀編鐎戝竷娴?
杩欎釜鏄釜闈炲父妫掔殑搴旂敤锛?

濡傛灉浣犲杽浜庡彂鐜扮編锛屽鏋滀綘鍠勪簬瑙傚療鏂伴矞鐨勪簨鐗╋紝濡傛灉浣犳槸涓€鍚嶆湁鐖辩殑鍓嶇鏀诲煄甯堟垨璁捐灏革紝閭ｄ箞浣犱竴瀹氫笉浼氬涓嬮潰鍥剧墖涓殑缁撴瀯鎰熷埌闄岀敓銆傛病閿欙紝杩欏氨鏄幇鍦ㄥ緢鐏殑鐎戝竷娴併€備篃绉扮爩澧欐晥鏋溿€傚氨鏄繖绉嶄笉绋冲畾缁撴瀯锛屽氨鏄繖绉嶄氦閿欎箣缇庯紝闇囨捈鐫€姣忎釜娴忚鑰呯殑瑙嗙缁忋€傚浜庝範鎯簡浼犵粺鏉℃潯妗嗘甯冨眬鐨勮鑰呮潵璇达紝杩欑鏂瑰紡鏃犵枒浼氳浠栦滑鐨勯紶鏍囪嚜鐢辨憞鎽嗏€?

瀹炵幇杩欎釜鏁堟灉闇€瑕佷袱涓猨Query鎻掍欢infinite-scroll鍜孧asonry銆?
infinite-scroll-jquery鍙傛暟璇﹁В锛?/strong>
$('#content').infinitescroll({
  navSelector  : "div.navigation", //瀵艰埅鐨勯€夋嫨鍣紝浼氳闅愯棌
  nextSelector : "div.navigation a:first",//鍖呭惈涓嬩竴椤甸摼鎺ョ殑閫夋嫨鍣?
  itemSelector : "#content div.post",//浣犲皢瑕佸彇鍥炵殑閫夐」(鍐呭鍧?
  debug        : true, //鍚敤璋冭瘯淇℃伅
  loadingImg   : "/img/loading.gif", //鍔犺浇鐨勬椂鍊欐樉绀虹殑鍥剧墖
                 //榛樿閲囩敤锛?http://www.infinite-scroll.com/loading.gif"
  animate      : true, //褰撴湁鏂版暟鎹姞杞借繘鏉ョ殑鏃跺€欙紝椤甸潰鏄惁鏈夊姩鐢绘晥鏋滐紝榛樿娌℃湁
  extraScrollPx: 50, //婊氬姩鏉¤窛绂诲簳閮ㄥ灏戝儚绱犵殑鏃跺€欏紑濮嬪姞杞斤紝榛樿150
  bufferPx     : 40,//杞藉叆淇℃伅鐨勬樉绀烘椂闂达紝鏃堕棿瓒婂ぇ锛岃浇鍏ヤ俊鎭樉绀烘椂闂磋秺鐭?
  errorCallback: function(){},//褰撳嚭閿欑殑鏃跺€欙紝姣斿404椤甸潰鐨勬椂鍊欐墽琛岀殑鍑芥暟
  localMode    : true //鏄惁鍏佽杞藉叆鍏锋湁鐩稿悓鍑芥暟鐨勯〉闈紝榛樿涓篺alse
  },function(arrayOfNewElems){
  //绋嬪簭鎵ц瀹岀殑鍥炶皟鍑芥暟
});


鍙栨秷缁戝畾浜嬩欢鐨勫嚱鏁板啓娉曪細$(window).unbind(鈥?infscr鈥?; 閫氳繃浜嬩欢瑙﹀彂鍔犺浇鏁版嵁鐨勫啓娉曪細 $(document).trigger(鈥榬etrieve.infscr鈥?; //姣斿鍔犲埌鏌愪釜click浜嬩欢涓?
姝ゆ彃浠惰繕鏈変竴涓矞涓轰汉鐭ョ殑鍔熻兘灏辨槸鍙互杞藉叆浠讳綍椤甸潰鐨勯€夋嫨鍣ㄤ腑鐨勫唴瀹癸紝鍙互鏄痠d浠ュ強鏄痗lass锛屽苟杞寲鍒癶tml瀛樺偍銆傝姣攋query鑷甫鐨勭殑load寮哄ぇ澶氫簡銆?
$('').load('/page/2/ #content div.post',function(){  
$(this).appendTo('#content');
});
瀹樻柟棣栭〉鍙婁笅杞藉湴鍧€: http://www.infinite-scroll.com/
Masonry鍙傛暟璇﹁В锛?/strong>
$(function(){
 $(´#container´).masonry({
 // options 璁剧疆閫夐」
 itemSelector : ´.item´, //瀛愮被鍏冪礌閫夋嫨鍣?
 columnWidth : 240 ,//涓€鍒楃殑瀹藉害 锛屽寘鎷竟璺?220+10+10
 isAnimated:true, //浣跨敤jquery鐨勫竷灞€鍙樺寲锛屾槸鍚﹀惎鐢ㄥ姩鐢绘晥鏋?
 animationOptions:{
 //jquery animate灞炴€?锛屽姩鐢绘晥鏋滈€夐」銆傛瘮濡傛笎鍙樻晥鏋?Object { queue: false, duration: 500 }
 },
 gutterWidth:0,//鍒楃殑闂撮殭
 isFitWidth:true,//鑷€傚簲瀹藉害
 isResizableL:true,// 鏄惁鍙皟鏁村ぇ灏?
 isRTL:false,//浣跨敤浠庡彸鍒板乏鐨勫竷灞€
 });
 });


瀹樻柟棣栭〉鍙婁笅杞藉湴鍧€锛?a target="_blank" href="http://masonry.desandro.com/index.html">http://masonry.desandro.com/index.html
鍙屽墤鍚堢挧婕旂ず浠ｇ爜锛?/strong>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script src="jquery.infinitescroll.min.js" type="text/javascript"></script>
<script src="jquery.masonry.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
var $container = $('#content ul'); //璁剧疆瀹瑰櫒
$('#content ul').infinitescroll({   
    navSelector  : "div.page .pages",  //瀵艰埅鐨勯€夋嫨鍣?
    nextSelector : "div.page .pages a.nextpage",  //鍖呭惈涓嬩竴椤甸摼鎺ョ殑閫夋嫨鍣?
    itemSelector : "#content ul li"  //浣犲皢瑕佸彇鍥炵殑閫夐」(鍐呭鍧?
  }, function( newElements ) {
                //绋嬪簭鎵ц瀹岀殑鍥炶皟鍑芥暟
                var $newElems = $( newElements );
                $container.masonry( 'appended', $newElems );
  });

   $('#content').masonry({
    itemSelector : '#content li', //瀛愮被鍏冪礌
    columnWidth : 251 //涓€鍒楃殑瀹藉害
  });

});
</script>


鏈€缁堟晥鏋滄紨绀?http://www.niumowang.org/demo/infinite/

相关推荐