ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryプラグインでウォーターフォールフロー画像表示を実装 example_jquery

jqueryプラグインでウォーターフォールフロー画像表示を実装 example_jquery

WBOY
WBOYオリジナル
2016-05-16 16:06:021133ブラウズ

2 つの滝の流れのプラグイン、jquery masonry と infinitescroll は、現時点で最も人気のある滝の流れの画像表示例を作成します。滝のような効果を持つ画像表示は、マウスで画像をスクロールすることで無限に読み込まれます。ユーザーは無制限の写真を閲覧したり、滝の流れの効果を備えた無制限のコンテンツを読み込んだりできます。

コード:

<script type="text/javascript">
function item_masonry(){ 
  $('.item img').load(function(){ 
    $('.infinite_scroll').masonry({ 
      itemSelector: '.masonry_brick',
      columnWidth:226,
      gutterWidth:15               
    });   
  });
     
  $('.infinite_scroll').masonry({ 
    itemSelector: '.masonry_brick',
    columnWidth:226,
    gutterWidth:15               
  }); 
}
 
$(function(){
 
  function item_callback(){ 
     
    $('.item').mouseover(function(){
      $(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
      $('.btns',this).show();
    }).mouseout(function(){
      $(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
      $('.btns',this).hide();     
    });
     
    item_masonry(); 
 
  }
 
  item_callback(); 
 
  $('.item').fadeIn();
 
  var sp = 1
   
  $(".infinite_scroll").infinitescroll({
    navSelector   : "#more",
    nextSelector  : "#more a",
    itemSelector  : ".item",
     
    loading:{
      img: "images/masonry_loading_1.gif",
      msgText: ' ',
      finishedMsg: '木有了',
      finished: function(){
        sp++;
        if(sp>=10){ //到第10页结束事件
          $("#more").remove();
          $("#infscr-loading").hide();
          $("#page").show();
          $(window).unbind('.infscr');
        }
      }  
    },errorCallback:function(){ 
      $("#page").show();
    }
     
  },function(newElements){
    var $newElems = $(newElements);
    $('.infinite_scroll').masonry('appended', $newElems, false);
    $newElems.fadeIn();
    item_callback();
    return;
  });
 
});
</script>

デモ写真

以上がこの記事の全内容です。jQuery を学ぶ皆さんのお役に立てれば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。