手机导航列表页面瀑布流图片无限加载代码

来源:https://www.sucaihuo.com/js/2793.html 2017-08-21 22:11浏览(1067) 收藏

一款手机导航列表页面瀑布流图片无限加载代码,鼠标滚动到底部时自动加载下面的图文列表内容,如此反复直到数据完全加载完毕,瀑布流的样式可以自由调整。
手机导航列表页面瀑布流图片无限加载代码
分类:图片代码 > 图片墙 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2