jquery 外掛實作瀑布流圖片展示實例_jquery

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有所幫助。