jquery 插件實現瀑布流圖片展示實例

2019-11-20 12:46:52

字體：大中小

來源：轉載

供稿：網友

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>

演示圖片