瀑布式布局+鼠标指向阴影层弹出效果

html部分

<section id="wrapper">
<div id="container">
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img27.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

        </div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img26.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img15.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img23.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img17.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img22.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img16.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img21.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img28.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img2.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img24.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img19.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img5.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img25.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
	<div class="grid">
		<div class="imgholder">
            <div class="cpContent" id="cpContent">
                <a href="#" target="iframe" onclick="showCp('146')">
                    <div class="cpWps">
                        <div class="list-item">
                            <div class="pd10">
                                <div class="box-preview">
                                    <div class="insetscroll">
                                        <img src="images/img20.jpg">
                                        <div class="box-mask">
                                            <div class="box-mask-detail">查看详情</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
		</div>

	</div>
</div>
</section>

　　css部分

 1 <style>
 2         /*产品移动动画*/
 3 
 4         .list-item{
 5             vertical-align:top;
 6             transition: top 1s ease 0s, left 1s ease 0s;
 7             cursor: pointer;
 8         }
 9         .pd10{
10             padding:0px;
11         }
12         .box-preview{
13         }
14         .box-preview .insetscroll{
15             overflow:hidden;
16             width:100%;
17             height:100%;
18             position:relative;
19             display:block;
20         }
21         .box-preview .insetscroll img{
22             display: block;
23         }
24         .box-mask{
25             width:100%;
26             height:100%;
27             position:absolute;
28             top:100%;
29             left: 100%;
30             background:#d3d3d3;
31             opacity:0.8;
32         }
33         .box-mask-detail{
34             margin:70px auto 0;
35             width:65px;
36             height:30px;
37             border:1px solid White;
38             color:red;
39             font-size:14px;
40             font-family:"微软雅黑";
41             text-align:center;
42             color:white;
43         }
44     </style>

  1 body{
  2     margin:0;
  3     padding:0;
  4     background:url(bg.gif) 0 0 repeat #f7f5f5;
  5     color:#333;
  6     font-family:Cambria, Georgia, serif;
  7     font-size:15px;
  8     overflow-x:hidden;
  9 }
 10 header, section, footer, hgroup{
 11     display:block;
 12 }
 13 a {
 14     color:#35BFFF;
 15     text-decoration:none;
 16 }
 17 a:hover, a:active{
 18     color:#91DCFF;
 19 }
 20 
 21 /* Header */
 22 #header{
 23     width:100%;
 24     background:#000;
 25     background:rgba(0, 0, 0, 0.8);
 26     padding:5px 0;
 27     letter-spacing:1px;
 28     margin-bottom:20px;
 29     position:fixed;
 30     top:0;
 31     left:0;
 32     z-index:99;
 33 }
 34 #header h1{
 35     padding:0 20px;
 36     margin:5px 0;
 37     text-shadow:2px 1px 1px #333, 2px 2px 1px #888;
 38     color:#EAEAEA;
 39     float:left;
 40     font-size:27px;
 41 }
 42 #backlinks{
 43     float:right;
 44     padding:0 20px;
 45     line-height:22px;
 46     font-weight:bold;
 47     font-size:13px;
 48 }
 49 #backlinks a{
 50     text-align:right;
 51     display:block;
 52 }
 53 
 54 /* Footer */
 55 #footer{
 56     width:100%;
 57     position:fixed;
 58     padding-left:20px;
 59     bottom:0;
 60     left:0;
 61     line-height:20px;
 62     color:#888;
 63     font-size:13px;
 64     background:rgb(0, 0, 0);
 65     background:rgba(0, 0, 0, 0.8);
 66     z-index:99;
 67 }
 68 #footer span{
 69     display:block;
 70 }
 71 
 72 /* clearfix */
 73 .clearfix {
 74     clear:both;
 75 }
 76 
 77 /* wrapper css */
 78 #wrapper{
 79     margin-top:70px;
 80     width:100%;
 81 }
 82 #wrapper hgroup{
 83     text-align:center;
 84 }
 85 #wrapper h2{
 86     margin:5px 0;
 87     color:#FF6D99;
 88     text-shadow:1px 1px 2px #A50031;
 89     font-size:33px;
 90     font-family:Arial Narrow, Arial, sans-serif;
 91 }
 92 #wrapper h3{
 93     font-style:italic;
 94     font-weight:normal;
 95     font-size:18px;
 96     text-shadow:1px 1px 0 #fff;
 97     color:#888;
 98     margin:5px 0;
 99 }
100 
101 #container{
102     position:relative;
103     width:1100px;
104     margin:0 auto 25px;
105     padding-bottom: 10px;
106     
107 }
108 .grid{
109     width:188px;
110     min-height:100px;
111     padding: 15px;
112     background:#fff;
113     margin:8px;
114     font-size:12px;
115     float:left;
116     box-shadow: 0 1px 3px rgba(34,25,25,0.4);
117     -moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
118     -webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
119     
120     -webkit-transition: top 1s ease, left 1s ease;
121     -moz-transition: top 1s ease, left 1s ease;
122     -o-transition: top 1s ease, left 1s ease;
123     -ms-transition: top 1s ease, left 1s ease;
124 }
125 
126 .grid strong {
127     border-bottom:1px solid #ccc;
128     margin:10px 0;
129     display:block;
130     padding:0 0 5px;
131     font-size:17px;
132 }
133 .grid .meta{
134     text-align:right;
135     color:#777;
136     font-style:italic;
137 }
138 
139 
140 @media screen and (max-width : 1240px) {
141     body{
142         overflow:auto;
143     }
144 }
145 @media screen and (max-width : 900px) {
146     #backlinks{
147         float:none;
148         clear:both;
149     }
150     #backlinks a{
151         display:inline-block;
152         padding-right:20px;
153     }
154     #wrapper{
155         margin-top:90px;
156     }
157 }
158 .btn01 {
159     width: 100%;
160     overflow: hidden;
161     position: relative;
162     -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
163     -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
164     box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
165 }
166 .btn01 img {
167     position: relative;
168     width: 100%;
169     top: 0;
170     left: 0;
171 }
172 .btn01 .ovrly {
173     background: rgba(0, 0, 0, 0.5);
174     height: 100%;
175     left: 0;
176     top: -100%;
177     width: 100%;
178     position: absolute;
179     -webkit-transition: all 0.5s;
180     -moz-transition: all 0.5s;
181     -o-transition: all 0.5s;
182     transition: all 0.5s;
183 }
184 .btn01 .buttons {
185     position: absolute;
186     top: -100%;
187     left: 50%;
188     -webkit-transition: all 0.5s;
189     -moz-transition: all 0.5s;
190     -o-transition: all 0.5s;
191     transition: all 0.5s;
192     -webkit-transform: translate(-50%, -50%);
193     -moz-transform: translate(-50%, -50%);
194     -ms-transform: translate(-50%, -50%);
195     -o-transform: translate(-50%, -50%);
196     transform: translate(-50%, -50%);
197 }
198 .btn01 .buttons .fa {
199     margin: 0 1px;
200     background: rgb(256, 256, 256);
201     -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
202     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
203     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
204     -webkit-border-radius: 50%;
205     -moz-border-radius: 50%;
206     border-radius: 50%;
207     color: rgba(50, 50, 50, 0.9);
208     display: inline-block;
209     line-height: 40px;
210     font-size: 16px;
211     text-align: center;
212     text-decoration: none;
213     width: 40px;
214     height: 40px;
215 }
216 .btn01:hover .buttons {
217     top: 50%;
218 }
219 .btn01:hover .ovrly {
220     top: 0;
221 }

js部分

 1 $(function(){
 2     $(".cpContent").on('mouseenter mouseleave','.list-item .insetscroll',function(e){
 3         var fx = getDir(e,$(this));
 4         if(e.type == "mouseout" || e.type == "mouseleave"){
 5             iconLeave($(this).find(".box-mask-detail"),$(this).find(".box-mask"),fx);
 6         }else{
 7             iconEnter($(this).find(".box-mask-detail"),$(this).find(".box-mask"),fx);
 8         }
 9 
10     })
11     function getDir(e, data) {
12         var size = {};
13         size.w = data.innerWidth();
14         size.h = data.innerHeight();
15         var pos = data.offset();
16         var x = (e.pageX - pos.left - (size.w / 2)) * (size.w > size.h ? (size.h / size.w) : 1);
17         var y = (e.pageY - pos.top - (size.h / 2)) * (size.h > size.w ? (size.w / size.h) : 1);
18         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
19         return direction;
20     }
21 
22     function iconEnter(i,b,f){
23         switch(f){
24             case 0:
25                 b.css({top:"-100%",left:0}).stop(true,true).animate({top: 0}, 500);
26                 break;
27             case 1:
28                 b.css({top:0,left:"100%"}).stop(true,true).animate({left: 0}, 500);
29                 break;
30             case 2:
31                 b.css({top:"100%",left:0}).stop(true,true).animate({top: 0}, 500);
32                 break;
33             case 3:
34                 b.css({top:0,left:"-100%"}).stop(true,true).animate({left: 0}, 500);
35                 break;
36         }
37 
38     }
39 
40     function iconLeave(i,b,f){
41         switch(f){
42             case 0:
43                 b.stop(true,true).animate({top: "-100%"}, 500);
44                 break;
45             case 1:
46                 b.stop(true,true).animate({left: "100%"}, 500);
47                 break;
48             case 2:
49                 b.stop(true,true).animate({top: "100%"}, 500);
50                 break;
51             case 3:
52                 b.stop(true,true).animate({left: "-100%"}, 500);
53                 break;
54         }
55 
56     }
57 
58 });

外加要插入blocksit.min.js和jquery.min.js，还有bootstrap

相关阅读:
useState 的介绍和多状态声明（二）
PHP：相对于C#，PHP中的个性化语法
 PHP：IIS下的PHP开发环境搭建
 PHP：同一件事，有太多的方式
 Javascript：再论Javascript的单线程机制之 DOM渲染时机
 Javascript：拦截所有AJAX调用，重点处理服务器异常
 DDD：谈谈数据模型、领域模型、视图模型和命令模型
 .NET：再论异常处理，一个真实的故事
 Javascript：由 “鸭子类型” 得出来的推论
 Workflow：采用坐标变换（移动和旋转）画箭头
原文地址：https://www.cnblogs.com/Victory-peng/p/5383173.html