最新消息:

第78款插件(三):jquery.masonry.js实现瀑布流鼠标移上去有“踩“和”收藏“

图片幻灯插件 杨红伟 3114浏览 0评论

整理作者:杨红伟  网名:子弹兄   QQ:403236160   如发现本站有任何功能上的问题,请联系作者,谢谢!

一、序言

往往在项目上做的,需要在简单的基础上进行深加工!我们来看一下这一章《第78款插件(三):jquery.masonry.js实现瀑布流鼠标移上去有“踩“和”收藏“》。


二:最简使用教程

最简DEMO演示:http://www.ijquery.cn/demo/masonry/local1

最简DEMO下载:http://www.ijquery.cn/demo/masonry/local1/local1.zip

1、HTML代码

注:以下都注释的,其中class=”w1000″是将页面居中的,真正循环的是从<!–item start–>到<!–item end–>,大家把这一循环多做几个,就可以做成瀑布流了!

<div class="w1000">
<div class="item_list infinite_scroll">
<!--item start-->
<div class="item masonry_brick">
	<div class="item_t">
		<div class="img"> <a href="#" target="_blank"><img width="210" alt="" src="images/1.jpg" /></a>
			<!-- 收藏 攒一个  start-->
			<div class="btns">
				<a href="#" data-id="" class="Button2 repin_link  "><em></em>踩<span class="num">(102)</span></a>
				<div class="fr"> <a href="#" data-id="" class="Button2"> <em></em><span class="text">收藏</span><span class="num">(0)</span> </a> </div>
			</div>
			<!-- 收藏 攒一个  start-->
		</div>
		<div class="title"><em>T:</em><span><a href="#" target="_blank">这是一个标题</a></span></div>
	</div>
	<div class="item_b clearfix">
		<div class="items_likes fl"> <span>标签: <a href="#">标签1</a> <a href="#">标签2</a> </span> </div>
	</div>
</div>
<!--item end-->
</div>
</div> 

2、JS代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript">
	$(function(){
		//瀑布流的函数
		function item_masonry(){ 
			$('.item img').load(function(){ 
				$('.infinite_scroll').masonry({ 
					itemSelector: '.masonry_brick',   // 附加选择器,用来指定哪些元素包裹的元素会重新排列。
					columnWidth:231, // 1列网格的宽度,单位为像素(px),默认: 第一个浮动元素外宽度。
					gutterWidth:19								
				});		
			});
		}
		//鼠标移上去的函数+瀑布流
		function item_callback(){
			$('.item').mouseover(function(){
				$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');
				$('.btns',this).show();
			})
			$('.item').mouseout(function(){
				$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');
				$('.btns',this).hide();		 	
			});
			item_masonry();	
		}
		//引用函数
		item_callback();  
	});
</script>

3、CSS代码

<link rel="stylesheet" href="css/css.css" type="text/css" media="all">

全部代码如下,其中主要的代码相信会CSS的都会的:

@charset "gb2312";
h1, h2, h3, h4, h5, h6, h7, p, ul, ol, dl, dt, dd, li, body, form, input, button, img, cite, strong, em, td, th { padding:0; margin:0;}
h1, h2, h3, h4, h5, h6, h7 { font-size:14px; font-weight:bold;}
img, table, td, th { border:0;}
ul, ol { list-style-type:none; padding:0; margin:0;}
a:link,a:visited { color:#666; text-decoration:none;}
a:hover { color:#000; text-decoration: none;}
body { margin:0; padding:0;color: #666;font: 12px 微软雅黑,tahoma,arial;}
.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%;}

.fl{float:left;}
.fr{float:right;}

.fl span{ font-weight:normal;}
.fl span a{ margin-left:5px; margin-right:5px;color:#666666;}
.fl span a:hover{color:#999999;}

.w1000{width:1000px;margin:0 auto;}

.item_list{position:relative;padding:0 0 50px;}
.item{width:231px;background:#F0F0F0;overflow:hidden;margin:15px 0 0 0;border: 1px solid #D9D4D4;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;}
.item_t .img a{display:block;}
.item_t .img a:hover{background:#f5f3f3;}
.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 .title{padding:8px 0;line-height:18px;}
.item_t .title em{ font-style:normal;font-size:15px; font-weight:bolder; color:#2A9CDA;font-family: '黑体',cursive; margin-right:5px;text-shadow: 0 1px 0 #999999;}
.item_t .title span a{ color: #000000; font-weight:500;}
.item_t .title span a:hover{text-decoration:underline;}
.item_b{padding:10px 8px;}
.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;}
/*收藏 攒 按钮*/
.item .btns{display:none;margin: 0 1px;position: absolute;right: 0;top: 10px;width: 208px;z-index: 3;}
.item .btns a.repin_link {float: left;}
.item .btns .Button2 {background:#FFFFFF;border: 0 none;border-radius: 6px 6px 6px 6px;box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 0 1px rgba(140, 126, 126, 0.5);font-size: 14px;padding: 8px 16px;margin-right:1px;color: #382F2A;}
.item .btns .Button2:hover {box-shadow: 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 0 1px rgba(140, 126, 126, 0.5), 0 1px 2px rgba(35, 24, 24, 0.75);}
.item .btns .Button2:active {box-shadow: 0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 0 1px rgba(140, 126, 126, 0.5), 0 0 1px rgba(232, 230, 230, 0.5);}
.item .btns .num {color:#FF0000;}

	

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址