您的位置：首页 > 其它

Mvc Kissy uploader实现图片批量上传附带瀑布流的照片墙

2013-08-08 10:37 363 查看

前言

　　KISSY

@model List<MvcApplication3.Models.Photos>
@{Layout = null;}
<!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=gb2312">
<title>jQuery实现的瀑布流布局的图片特效代码</title>
<link href="../../Content/lanrenzhijia.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../../Scripts/blocksit.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
//vendor script
$('#header')
.css({ 'top': -50 })
.delay(1000)
.animate({ 'top': 0 }, 800);

$('#footer')
.css({ 'bottom': -15 })
.delay(1000)
.animate({ 'bottom': 0 }, 800);

//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
});
}
});
});
</script>
</head>
<body>
<!-- Content -->
<section id="wrapper">
<div id="container">
@foreach (var item in Model)
{
<div class="grid">
<div class="imgholder"> <img src="@item.Src" /> </div>
<strong>@item.Desc</strong>
<p>上 传 时 间：</p>
<div class="meta">@item.PubliseTime.ToString()</div>
</div>
}
<!---->
</div>
</section>
</body>
</html>

View Code
DEMO下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙

Mvc Kissy uploader实现图片批量上传附带瀑布流的照片墙