页面的head部分，需引入3个不同的页面样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="finishing/css/swiper.min.css" />
<link type="text/css" rel="stylesheet" href="finishing/css/reset.css" />
<link type="text/css" rel="stylesheet" href="finishing/css/find.css" />

页面的body部分，主要分为两个部分：一个是导航部分的div容器里放入nav标签，另一个是瀑布流初始内容部分的div容器里放入了aside标签，代码如下：

<div class="container">
	<nav class="swiper-container nav-container">
		<ul class="swiper-wrapper nav-ul">
			<li class="swiper-slide active-li">
				<a href="javascript:;" class="slide-a">全部</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">油画</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">水彩</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">山水墨画</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">素描画</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">油画油画</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">水彩</a>
			</li>
			<li class="swiper-slide">
				<a href="javascript:;" class="slide-a">艺术画</a>
			</li>
		</ul>
	</nav><!--nav-container end-->
	<aside class="fall-box grid">
		<div class="grid-item item">
			<img src="finishing/img/works5.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works2.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">秘境之湖</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">￥<em>2250.00</em></p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works4.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works3.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works1.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">秘境之湖</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">￥<em>2250.00</em></p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works5.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works5.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works2.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">秘境之湖</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">￥<em>2250.00</em></p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works4.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
		<div class="grid-item item">
			<img src="finishing/img/works3.jpg" class="item-img" />
			<section class="section-p">
			   <p class="title-p">北冰洋的夏天</p>
		       <p class="name-p">胡杨</p>
		       <p class="price-p">非卖品</p>
			</section>
		</div><!--item end-->
	</aside>
	<a href="javascript:;" class="more-a">
		<img src="finishing/img/ic_loading.gif" />
    </a>
</div>

<script type="text/javascript" src="finishing/js/jquery.min.js"></script>
<script type="text/javascript" src="finishing/js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="finishing/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="finishing/js/swiper.min.js"></script>
<script type="text/javascript" src="finishing/js/find.js"></script>