簡要說明
這是一款仿Pinterest網站的簡單實用的響應式網格瀑布流布局js插件。該js插件通過簡單的CSS和js代碼制作出流式布局的網格系統，并通過媒體查詢來控制網格的響應式效果。
使用方法
使用該網格瀑布流布局需要引入jQuery和jaliswall.js檔案。
<script src="dist/jquery.min.js"></script>
<script src="dist/jaliswall.js"></script>
HTML結構
該瀑布流特效使用一個<div>作為包裹容器。在它裡面，可以使用<a>元素來包裹圖檔和它的标題元素。
<div class="wall">
<a class="wall-item" href="#">
<img src="1.jpg">
<h2>wall-item 1</h2>
</a>
<a class="wall-item" href="#">
<img src="2.jpg">
<h2>wall-item 2</h2>
</a>
<a class="wall-item" href="#">
<img src="3.jpg">
<h2>wall-item 3</h2>
</a>
...
</div>
CSS樣式
需要為該瀑布流特效添加下面的一些必要的CSS樣式。
.article {
display: block;
margin: 0 0 30px 0;
padding: 12px;
background: white;
border-radius: 3px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
transition: all 220ms;
}
.article:hover {
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
transition: all 220ms;
}
.article > img {
display: block;
width: 100%;
margin: 0 0 24px 0;
}
.article h2 {
text-align: center;
font-size: 14px;
text-transform: uppercase;
margin: 0 0 12px 0;
}
.wall {
display: block;
position: relative;
}
.wall-column {
display: block;
position: relative;
width: 25%;
float: left;
padding: 0 12px;
box-sizing: border-box;
}
@media (max-width: 640px) {
.wall-column {
width: 50%;
}
}
@media (max-width: 480px) {
.wall-column {
width: auto;
float: none;
}
}
其中.wall-column的width屬性用于控制每行顯示多少列，例如，要想每行顯示3列，可以設定為width:33.333333%。
初始化插件
在頁面DOM元素加載完畢之後，可以通過下面的方法來初始化該網格瀑布流插件。
$(function(){
$('.wall').jaliswall();
});
配置參數
該網格瀑布流插件有兩個可用的配置參數。
item：瀑布流網格項的class。預設值'.wall-item'。
columnClass：網格列的class。預設值為'.wall-column'。
源碼示範/下載下傳請點選閱讀原文
↓↓↓↓↓↓