一款手机导航列表页面瀑布流图片无限加载代码,鼠标滚动到底部时自动加载下面的图文列表内容,如此反复直到数据完全加载完毕,瀑布流的样式可以自由调整。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791