瀑布流 jquery

 

搜尋KeyWord:瀑布流 jquery、grid image jquery

課程使用:http://masonry.desandro.com/

S1:圖片加入網頁內

<div class="grid">
<div><a href="img/grid_L/gridL01.jpg"><img src="img/grid_S/gridS01.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL02.jpg"><img src="img/grid_S/gridS02.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL03.jpg"><img src="img/grid_S/gridS03.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL04.jpg"><img src="img/grid_S/gridS04.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL05.jpg"><img src="img/grid_S/gridS05.jpg" alt=""/></a></div>
<div class="gridW2"><a class="fancyBoximg" href="img/grid_L/gridL06.jpg"><img src="img/grid_S/gridS06.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL07.jpg"><img src="img/grid_S/gridS07.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL08.jpg"><img src="img/grid_S/gridS08.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL09.jpg"><img src="img/grid_S/gridS09.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL10.jpg"><img src="img/grid_S/gridS10.jpg" alt=""/></a></div>
<div class="gridW2"><a href="img/grid_L/gridL10.jpg"><img src="img/grid_S/gridS11.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL12.jpg"><img src="img/grid_S/gridS12.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL13.jpg"><img src="img/grid_S/gridS13.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL14.jpg"><img src="img/grid_S/gridS14.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL15.jpg"><img src="img/grid_S/gridS15.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL16.jpg"><img src="img/grid_S/gridS16.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL17.jpg"><img src="img/grid_S/gridS17.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL18.jpg"><img src="img/grid_S/gridS18.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL19.jpg"><img src="img/grid_S/gridS19.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL20.jpg"><img src="img/grid_S/gridS20.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL21.jpg"><img src="img/grid_S/gridS21.jpg" alt=""/></a></div>
<div class="gridW2"><a href="img/grid_L/gridL22.jpg"><img src="img/grid_S/gridS22.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL23.jpg"><img src="img/grid_S/gridS23.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL24.jpg"><img src="img/grid_S/gridS24.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL25.jpg"><img src="img/grid_S/gridS25.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL26.jpg"><img src="img/grid_S/gridS26.jpg" alt=""/></a></div>
<div class=" gridW2"><a href="img/grid_L/gridL27.jpg"><img src="img/grid_S/gridS27.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL28.jpg"><img src="img/grid_S/gridS28.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL29.jpg"><img src="img/grid_S/gridS29.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL30.jpg"><img src="img/grid_S/gridS30.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL01.jpg"><img src="img/grid_S/gridS01.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL02.jpg"><img src="img/grid_S/gridS02.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL03.jpg"><img src="img/grid_S/gridS03.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL04.jpg"><img src="img/grid_S/gridS04.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL05.jpg"><img src="img/grid_S/gridS05.jpg" alt=""/></a></div>
<div class="gridW2"><a class="fancyBoximg" href="img/grid_L/gridL06.jpg"><img src="img/grid_S/gridS06.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL07.jpg"><img src="img/grid_S/gridS07.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL08.jpg"><img src="img/grid_S/gridS08.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL09.jpg"><img src="img/grid_S/gridS09.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL10.jpg"><img src="img/grid_S/gridS10.jpg" alt=""/></a></div>
<div class="gridW2"><a href="img/grid_L/gridL10.jpg"><img src="img/grid_S/gridS11.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL12.jpg"><img src="img/grid_S/gridS12.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL13.jpg"><img src="img/grid_S/gridS13.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL14.jpg"><img src="img/grid_S/gridS14.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL15.jpg"><img src="img/grid_S/gridS15.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL16.jpg"><img src="img/grid_S/gridS16.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL17.jpg"><img src="img/grid_S/gridS17.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL18.jpg"><img src="img/grid_S/gridS18.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL19.jpg"><img src="img/grid_S/gridS19.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL20.jpg"><img src="img/grid_S/gridS20.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL21.jpg"><img src="img/grid_S/gridS21.jpg" alt=""/></a></div>
<div class="gridW2"><a href="img/grid_L/gridL22.jpg"><img src="img/grid_S/gridS22.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL23.jpg"><img src="img/grid_S/gridS23.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL24.jpg"><img src="img/grid_S/gridS24.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL25.jpg"><img src="img/grid_S/gridS25.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL26.jpg"><img src="img/grid_S/gridS26.jpg" alt=""/></a></div>
<div class=" gridW2"><a href="img/grid_L/gridL27.jpg"><img src="img/grid_S/gridS27.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL28.jpg"><img src="img/grid_S/gridS28.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL29.jpg"><img src="img/grid_S/gridS29.jpg" alt=""/></a></div>
<div><a href="img/grid_L/gridL30.jpg"><img src="img/grid_S/gridS30.jpg" alt=""/></a></div>
</div>

S2:依外掛網站說明設定。

因【masonry】說明要求,所有div應加入【class=”grid-item”】,因圖片多故利用jQuery加入。

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/masonry.pkgd.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
// grid
$('.grid>div').addClass('grid-item');
$('.grid').masonry({
// options
itemSelector: '.grid-item',
originLeft:true,
fitWidth:false
});
/*====Grid====================*/
.grid { margin: 0 20px;}
.grid-item {margin: 5px; width:calc(100%/5 - 10px);}
.gridW2{width:calc((100%/5 - 10px) * 2);}
.grid-item img{width:100%; height:auto;}

S3:因未載好的圖片可能會影響Masonry的layout排列,因此導致破版。ImageLoaded可以用來處理這個問題。所以可用如下code的方式,在圖片載入完成後呼叫masonry的function來進行排列。

var $grid = $('.grid').imagesLoaded(function(){
$grid.masonry({
// options
itemSelector: '.grid-item',
originLeft:true,
fitWidth:false
});
});

參考連結