怎么使用jquery.masonry實現瀑布流效果

這篇文章主要介紹“怎么使用jquery.masonry實現瀑布流效果”，在日常操作中，相信很多人在怎么使用jquery.masonry實現瀑布流效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么使用jquery.masonry實現瀑布流效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、分別加載jquery插件與jquery.masonry插件

<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>

二、瀑布流局部樣式代碼

.container-fluid {
 padding: 20px;
}
.box {
 margin-bottom: 20px;
 float: left;
 width: 220px;
}
.box img {
 max-width: 100%
}

解釋：針對第二步的頁面代碼，我們需要添加一點樣式，.box 類我們添加了浮動屬性，還設置了他的寬度。

三、頁面瀑布流布局html代碼

<div id="masonry" class="container-fluid">
 <div class="box"><img src="images/1.jpg"></div>
 <div class="box"><img src="images/2.jpg"></div>
 <div class="box"><img src="images/3.jpg"></div>
 <div class="box"><img src="images/4.jpg"></div>
 <div class="box"><img src="images/5.jpg"></div>
</div>

解釋：把每個小內容塊放在一個擁有相關類的容器里，然后把所有的內容塊放在一個大的容器里，這里我們把內容塊圖片放在一個擁有 .box 類的 <div> 標簽里，然后把他們又使用帶有 #masonry ID 的 <div> 里面，一會兒我們會用 #masonry ID 和 .box 類來觸發使用瀑布流。

四、初始化瀑布流插件的jquery腳本代碼

$(function(){
 var $container = $('#masonry');
 $container.imagesLoaded( function(){
  $container.masonry({
   itemSelector : '.box',
   gutterWidth : 20,
   isAnimated: true,
  });
 });
});

解釋：這里我們首先定位想使用瀑布流的大容器是什么，這里就是帶有 #masonry ID 的 <div> 標簽，在 var $container = $('#masonry'); 這行代碼中定義。然后我們還要說明瀑布流里的每個內容塊容器上共同的類是什么，這里就是帶有 .box 類的 <div> 標簽，在itemSelector : ‘.box', 這行代碼中定義。gutterWidth : 20, 這行代碼定義了內容塊之間的距離是 20 像素，isAnimated: true, 這行代碼可以打開動畫選項，也就是當改變窗口寬度的時候，每行顯示的內容塊的數量會有變化，這個變化會使用一種動畫效果。

到此，關于“怎么使用jquery.masonry實現瀑布流效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！