jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery瀑布流实例最流行瀑布流图片展示</title>
<meta name="description" content="jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例，通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
em{font-style:normal;}
a{text-decoration:none;cursor:pointer;color:#666666;}
a:hover{color:#FF6699;}
body{background:url("images/bodybg.jpg") repeat #f5f6f7;color:#666666;font-family:Arial;font-size:12px;}
.fl{float:left;}.fr{float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
*+html .clearfix{min-height:1%;}
.demo{width:950px;margin:0 auto;}
/* item_list */
.item_list{position:relative;padding:0 0 50px;}
.item{
width:226px;background:#fff;overflow:hidden;margin:15px 0 0 0;
border-radius:4px 4px 4px 4px;
box-shadow:0 1px 3px rgba(34, 25, 25, 0.2);
}
.item_t{padding:10px 8px 0;}
.item_t .img{background-color:#FFFFFF;margin:0 auto;position:relative;width:210px;min-height:210px;}
.item_t .img a{display:block;}
.item_t .img a:hover{background:#000;}
.item_t .img a:hover img{filter:alpha(opacity=80);-khtml-opacity:0.8;opacity:0.8;-webkit-transition:all 0.3s ease-out;-khtml-transition:all 0.3s ease-out;}
.item_t .price{
position:absolute;bottom:10px;right:0px;background-color:rgba(0, 0, 0, 0.2);color:#FFF;
filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#33000000, endcolorstr=#33000000);
}
.item .btns{display:none;}
.img_album_btn{top:0px;right:0px;position:absolute;background:#ff6fa6;color:#ffffff;height:20px;line-height:20px;width:56px;border-radius:3px;}
.img_album_btn:hover{color:#fff;}
.item_t .title{padding:8px 0;line-height:18px;}
.item_b{padding:10px 8px;}
.item_b .items_likes .like_btn{background:url("images/fav_icon_word_new_1220.png") no-repeat;display:block;float:left;height:23px;width:59px;margin-right:5px;}
.item_b .items_likes em{line-height:23px;display:block;float:left;padding:0px 6px;color:#FF6699;font-weight:800;border:1px solid #ff6fa6;border-radius:3px;}
/* more */
#more{display:block;margin:10px auto 20px;}
/* infscr-loading */
#infscr-loading{bottom:-10px;left:45%;position:absolute;text-align:center;height:20px;line-height:20px;z-index:100;width:120px;}
/* page */
.page{display:none;font-size:18px;height:60px;text-align:center;margin:20px 0 0 0;}
.page_num a,.page_num span{margin:0 2px;background:url("images/page.png") no-repeat;display:inline-block;width:30px;height:28px;line-height:26px;overflow:hidden;}
.page_num a{background-position:-65px 0;color:#FF3333;overflow:hidden;}
.page_num .prev{background-position:1px -33px;}
.page_num .unprev{background-position:1px 0;cursor:default;}
.page_num .next{background-position:-32px 0;}
.page_num .unnext{background-position:-32px -33px;cursor:default;}
.page_num .current{background-position:-99px 0;color:#FFFFFF;}
.page_num .etc{background-position:-172px 8px;}
/* to_top */
.to_top a,.to_top a:hover{background:url("images/gotop.png") no-repeat}
.to_top a{
background-position:0 0;float:left;height:50px;overflow:hidden;width:50px;position:fixed;bottom:35px;cursor:pointer;right:20px;
_position:absolute;
_right:auto;
_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft, 10)||0)-(parseInt(this.currentStyle.marginRight, 10)||20));
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop, 10)||20)-(parseInt(this.currentStyle.marginBottom, 10)||20)));
}
.to_top a:hover{background-position:-51px 0px;}
</style>
<script type="text/javascript">
var isWidescreen=screen.width>=1280;
if(isWidescreen){document.write("<style type='text/css'>.demo{width:1194px;}</style>");}
</script>
<script type="text/javascript">
function item_masonry(){
$('.item img').load(function(){
$('.infinite_scroll').masonry({
itemSelector: '.masonry_brick',
columnWidth:226,
gutterWidth:15
});
});
$('.infinite_scroll').masonry({
itemSelector: '.masonry_brick',
columnWidth:226,
gutterWidth:15
});
}
$(function(){
function item_callback(){
$('.item').mouseover(function(){
$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
$('.btns',this).show();
}).mouseout(function(){
$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
$('.btns',this).hide();
});
item_masonry();
}
item_callback();
$('.item').fadeIn();
var sp = 1
$(".infinite_scroll").infinitescroll({
navSelector : "#more",
nextSelector : "#more a",
itemSelector : ".item",
loading:{
img: "images/masonry_loading_1.gif",
msgText: ' ',
finishedMsg: '木有了',
finished: function(){
sp++;
if(sp>=10){ //到第10页结束事件
$("#more").remove();
$("#infscr-loading").hide();
$("#page").show();
$(window).unbind('.infscr');
}
}
},errorCallback:function(){
$("#page").show();
}
},function(newElements){
var $newElems = $(newElements);
$('.infinite_scroll').masonry('appended', $newElems, false);
$newElems.fadeIn();
item_callback();
return;
});
});
</script>
</head>
<body>
<div class="demo clearfix">
<div class="item_list infinite_scroll">
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="285" alt="js lazyload实现网页图片延迟加载特效" src="images/pic/01.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>js lazyload实现网页图片延迟加载特效</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="164" alt="js图片特效制作js焦点图上下滚动slider切换效果" src="images/pic/02.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>js图片特效制作js焦点图上下滚动slider切换效果</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="287" alt="js树形导航菜单制作垂直js导航条特效" src="images/pic/03.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>js树形导航菜单制作垂直js导航条特效</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="282" alt="flash特效制作flash图片滚动带按钮控制左右图片滚动" src="images/pic/07.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>flash特效制作flash图片滚动带按钮控制左右图片滚动</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="266" alt="flash焦点图切换特效制作各大网站的焦点图片轮播" src="images/pic/08.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>flash焦点图切换特效制作各大网站的焦点图片轮播</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="287" alt="CSS如何定位工程" src="images/pic/13.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>CSS如何定位工程</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="323" alt="用div+css3美化制作动画导航特效鼠标滑过动画显示" src="images/pic/14.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>用div+css3美化制作动画导航特效鼠标滑过动画显示</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="304" alt="用div+css制作一个CSS3的简约图标导航菜单" src="images/pic/15.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>用div+css制作一个CSS3的简约图标导航菜单</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="315" alt="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示" src="images/pic/16.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
<div class="item masonry_brick">
<div class="item_t">
<div class="img">
<a href="http://www.17sucai.com/"><img width="210" height="314" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" src="images/pic/17.jpg" /></a>
<span class="price">￥195.00</span>
<div class="btns">
<a href="http://www.17sucai.com/" class="img_album_btn">加入专辑</a>
</div>
</div>
<div class="title"><span>jquery 幻灯片切换应用一个HTML5的幻灯片</span></div>
</div>
<div class="item_b clearfix">
<div class="items_likes fl">
<a href="http://www.17sucai.com/" class="like_btn"></a>
<em class="bold">916</em>
</div>
<div class="items_comment fr"><a href="http://www.17sucai.com/">评论</a><em class="bold">(0)</em></div>
</div>
</div><!--item end-->
</div>
<div id="more"><a href="page/2.html"></a></div>
<div id="page" class="page" style="display:none;">
<div class="page_num">
<span class="unprev"></span>
<span class="current">1</span>
<a href="http://www.17sucai.com/"> 2 </a>
<a href="http://www.17sucai.com/"> 3 </a>
<a href="http://www.17sucai.com/"> 4 </a>
<a href="http://www.17sucai.com/"> 5 </a>
<span class="etc"></span>
<a href="http://www.17sucai.com/">12</a>
<a href="http://www.17sucai.com/" class="next"></a>
</div>
</div>
</div>
<div style="display:none;" id="gotopbtn" class="to_top"><a title="返回顶部" href="javascript:void(0);"></a></div>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
$(window).scrollTop()>1000 ? $("#gotopbtn").css('display','').click(function(){
$(window).scrollTop(0);
}):$("#gotopbtn").css('display','none');
});
});
</script>
</body>
</html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码获取
❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
>>>戳我>>>点击进入200例期末大作业作品
200多例 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
