整理作者:杨红伟 网名:子弹兄 QQ:403236160 如发现本站有任何功能上的问题,请联系作者,谢谢!
一、序言
往往在项目上做的,需要在简单的基础上进行深加工!我们来看一下这一章《第78款插件(三):jquery.masonry.js实现瀑布流鼠标移上去有“踩“和”收藏“》。
二:最简使用教程
最简DEMO演示:http://www.ijquery.cn/study/demo/masonry/local1
最简DEMO下载:http://www.ijquery.cn/study/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;}