鼠标划过div右上角显示删除叉,瀑布流效果

效果图：

CSS样式：

body{
	margin:0;
	padding:0;
	background:url(../bg.gif) 0 0 repeat #f7f5f5;
	color:#333;
	font-family:Cambria, Georgia, serif;
	font-size:15px;
	overflow-x:hidden;
}


a {
	color:black;
	text-decoration:none;
}
a:hover, a:active{
	color:black;
}

/* clearfix */
.clearfix {
	clear:both;
}

/* container */
#container
{
	position:relative;
	width:1100px;
	margin:0 auto 25px;
	padding-bottom: 10px;
	
}



.grid{
	width:188px;
	min-height:100px;
	padding: 15px;
	background:#fff;
	margin:8px;
	font-size:12px;
	float:left;
	box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	-moz-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	-webkit-box-shadow: 0 1px 3px rgba(34,25,25,0.4);
	
	-webkit-transition: top 1s ease, left 1s ease;
	-moz-transition: top 1s ease, left 1s ease;
	-o-transition: top 1s ease, left 1s ease;
	-ms-transition: top 1s ease, left 1s ease;
}

.border
{
   box-shadow: 2px 2px 3px  rgba(34,25,25,0.4) ;
	-moz-box-shadow: 2px 2px 3px  rgba(34,25,25,0.4) ;
	-webkit-box-shadow: 2px 2px 3px rgba(34,25,25,0.4) ;
  cursor:pointer;      
}


.grid .closeimg
{
    position : absolute;
	top : -25px;
	right : -16px;
	width : 50px;
	height : 50px;
	display:none;
}

.grid strong {
	border-bottom:1px solid #ccc;
	margin:10px 0;
	display:block;
	padding:0 0 5px;
	font-size:17px;
}
.grid .meta{
	text-align:right;
	color:#777;
	font-style:italic;
}
.grid .imgholder img{
	max-width:100%;
	background:#ccc;
	display:block;
}

HTML代码：

<div id="container">
        <div class="grid">
            <img src="close_pop.png" class="closeimg" alt="删除商品"  />
            <div class="imgholder">
                <img src="img27.jpg" width="175px" />
            </div>
            <strong>日落湖</strong>
            <p>
                和平日落景观......</p>
            <div class="meta">
                2013年6月6日</div>
        </div>
        <div class="grid">
         <img src="close_pop.png" class="closeimg" alt="删除商品" width="80px" height="80px" />
            <div class="imgholder">
                <img src="img27.jpg" />
            </div>
            <strong>天国的桥梁</strong>
            <p>
                桥在哪里？</p>
            <div class="meta">
                by SigitEko</div>
        </div>
</div>

JS代码：

  <script type="text/javascript">
        $(document).ready(function () {



            //blocksit define
            $(window).load(function () {
                $('#container').BlocksIt({
                    numOfCol: 5,
                    offsetX: 8,
                    offsetY: 8
                });
            });

            //window resize
            var currentWidth = 1100;
            $(window).resize(function () {
                var winWidth = $(window).width();
                var conWidth;
                if (winWidth < 660) {
                    conWidth = 440;
                    col = 2
                } else if (winWidth < 880) {
                    conWidth = 660;
                    col = 3
                } else if (winWidth < 1100) {
                    conWidth = 880;
                    col = 4;
                } else {
                    conWidth = 1100;
                    col = 5;
                }

                if (conWidth != currentWidth) {
                    currentWidth = conWidth;
                    $('#container').width(conWidth);
                    $('#container').BlocksIt({
                        numOfCol: col,
                        offsetX: 8,
                        offsetY: 8
                    });
                }
            });

            //鼠标划过事件
            $(".grid").mouseover(function () {
                $(this).addClass("border");
                //显示删除叉
                $(this).find(".closeimg").css("display", "block");
            });
            $(".grid").mouseout(function () {
                $(this).removeClass("border");
                //隐藏删除叉
                $(this).find(".closeimg").css("display", "none");

            });
    });
    </script>

使用到图片：

img27.png

close_pop.png