jQuery点击查看更多，列表陆续显示

jQuery点击查看更多图片

演示效果：

jQuery点击查看更多

HTML代码：

<div class="gallerywrap"><div class="gallerytl gallery-icont"><h3>《千与千寻》</h3><h4>再漫长的故事，也有完结的时候；行驶的再慢的列车，也有一个又一个的站台；再亲密无间的旅伴，也有分开的时候。<br>旅途上经历的事情，可能会被我们遗忘；旅途上学到的东西，我们却会将它记在心间。</h4></div><div class="gallery gallery-icont"><a href="javascript:;" class="item"><img src="img/img01.jpg" /><div class="textbox"><div><h3>《千与千寻》</h3><h4>不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。</h4></div></div></a><a href="javascript:;" class="item"><img src="img/img02.jpg" /><div class="textbox"><div><h3>《千与千寻》</h3><h4>因为遇见你，我才知道我也能具有美丽的记忆。所以，无论你怎样对待我，我都会用心去宽恕你的恨，用心去铭记你的好。</h4></div></div></a><a href="javascript:;" class="item"><img src="img/img03.jpg" /><div class="textbox"><div><h3>《千与千寻》</h3><h4>这世上有一条路无论如何也不能走，那就是歧途，只要走错一步结果都会是粉身碎骨</h4></div></div></a><a href="javascript:;" class="item"><img src="img/img04.jpg" /><div class="textbox"><div><h3>《千与千寻》</h3><h4>这个世界真的很现实，每个人都在为着同一个目的，不惜一切代价努力着，心甘情愿的成为金钱的奴隶，死心蹋地的付出</h4></div></div></a><a href="javascript:;" class="item"><img src="img/img05.jpg" /><div class="textbox"><div><h3>《千与千寻》</h3><h4>生活坏到一定程度就会好起来，因为它无法更坏，努力过后，才知道许多事情，坚持坚持，就过来了。</h4></div></div></a><a href="javascript:;" class="item"><img src="img/img06.jpg" /><div class="textbox"><div><h3>《千与千寻》</h3><h4>曾经发生过的事情不可能忘记，只不过是想不起而已。</h4></div></div></a></div><a href="javascript:;" class="more01 moreload" onClick="moreload.loadMore();">查看更多<i class="fa fa-hand-o-down" aria-hidden="true"></i></a>
</div>

CSS样式：

/* 点击加载更多 */
.gallerywrap{width: 100%;box-sizing: border-box;padding: 80px 0;}
.gallerywrap:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(../img/bgone.jpg)no-repeat fixed;background-size: cover;opacity: 0.3;z-index: 0;}
/* gallery-icont */
.gallery-icont{width: 80%;}
.gallerytl{position: relative;margin: auto;z-index: 1;text-align: center;margin-bottom: 50px;}
.gallerytl h3{font-size: 36px;color: #7A5656;margin-bottom: 30px;}
.gallerytl h4{font-size: 16px;color: #666666;line-height: 30px;}/* gallery */
.gallery{position: relative;margin: auto;z-index: 1;display: flex;display: -webkit-flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.gallery .item{display: block;width: 32%;margin-right: 2%;margin-bottom: 2%;overflow: hidden;position: relative;}
.gallery .item:nth-of-type(3n){margin-right: 0;}
.gallery .item img{display: block;width: 100%;transition: all .6s;transform: scale(1.1);-webkit-transform: scale(1.1);}
.gallery .item:hover img{transform: scale(1);-webkit-transform: scale(1);opacity: 0.6;}
.gallery .item .textbox{width: 80%;height: 80%;position: absolute;top: 10%;left: 10%;box-sizing: border-box;background-color: rgba(0,0,0,0.5);border: 2px solid #FFFFFF;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;padding: 0 30px;text-align: center;transform: scale(1.5);-webkit-transform: scale(1.5);transition: all .4s ease-in-out;opacity: 0;}
.gallery .item .textbox h3{font-size: 20px;color: #FFFFFF;}
.gallery .item .textbox h4{font-size: 14px;line-height: 26px;color: #FFFFFF;margin-top: 20px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;opacity: 0.75;}
.gallery .item:hover .textbox{transform: scale(1);-webkit-transform: scale(1);opacity: 1;}/* more01 */
.more01{position: relative;display: block;width: 400px;height: 56px;line-height: 56px;text-align: center;z-index: 2;background-color: #7A5656;color: #FFFFFF;font-size: 15px;transition: all .5s;border: 2px solid #7A5656;}
.more01 i{font-size: inherit;color: inherit;margin-left: 20px;}
.more01:after{content: '';display: block;width: 50%;height: 100%;position: absolute;top: 0;left: 50%;transform: translateX(-50%);transition: all .3s;-webkit-transform: translateX(-50%);background-color: transparent;z-index: -1;}
.more01:hover:after{width: 100%;background-color: #FFFFFF;}
.more01:hover{color: #7A5656;   box-shadow: 3px 3px 8px 4px rgba(0,0,0,0.15);}.gallerywrap .more01{margin: 30px auto 0;}

jQuery代码：

<script>var _content = []; //临时存储li循环内容var moreload = {_default:6, //默认显示图片个数_loading:3,  //每次点击按钮后加载的个数init:function(){var lis = $(".gallery .item");$(".gallery").html("");for(var n=0;n<moreload._default;n++){lis.eq(n).appendTo(".gallery");}$(".gallery img").each(function(){$(this).attr('src',$(this).attr('realSrc'));})for(var i=moreload._default;i<lis.length;i++){_content.push(lis.eq(i));}$(".moreload .hidden").html("");},loadMore:function(){var mLis = $(".gallerywrap .gallery .item").length;for(var i =0;i<moreload._loading;i++){var target = _content.shift();if(!target){$('.gallerywrap .moreload').css("display","none");break;}$(".gallerywrap .gallery").append(target);$(".gallerywrap .gallery img").eq(mLis+i).each(function(){$(this).attr('src',$(this).attr('realSrc'));});}}}moreload.init();</script>

jQuery点击查看更多，列表陆续显示相关推荐

直播电商平台开发，点击查看更多显示所有内容
直播电商平台开发,点击查看更多显示所有内容实现代码: mainactivity.xml: <?xml version="1.0" encoding="utf-8& ...
点击查看更多进行分页，uniapp，分页请求
感觉下滑分页没有点击分页简单好用,记录一下,自己瞎写的 <view style="text-align: center;color: #737373;font-size: 12px;& ...
js实现加载所有内容点击查看更多
功能:过长文章内容实现通过查看更多实现 js代码直接套, 示例CSS 请忽视, 具体根据需求设置 <!DOCTYPE html> <head><meta http-eq ...
原生JS实现点击查看更多
评论区点击查看更多功能的实现思路: 对内容的高度进行判断,如果内容的高度大于设定的值,将内容的高度设定为固定值,同时将'查看更多'的节点上树.实现还是挺简单的,直接看代码. <!DOCTYPE ...
女神推荐, 卡片,广告图 ,点击查看更多
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: <view><view class='title'>女神推荐 </vie ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
html隐藏文字点击查看更多,js 文字超出部分隐藏、点击显示更多示例
感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. css: *{ padding: 0; margin: 0; } .text-hide{ ...
Vue2.0 组件文本超出3行显示... 点击查看更多可以查看全部内容(展开收起)
效果 <template><div ref="txttype" class="bottom"><div :class=" ...

jQuery点击查看更多，列表陆续显示

jQuery点击查看更多图片

jQuery点击查看更多，列表陆续显示相关推荐

最新文章

热门文章