借助Masonry可轻松实现瀑布流。本篇实现一个简单的图文瀑布流效果，如下：
图文瀑布流显示的2个要素是图片路径和文字内容，对应的Model为：
namespace MvcApplication1.Models
{
public class News
{
public string ImgUrl { get; set; }
public string Content { get; set; }
}
}
HomeController中把该Model的集合实例传递给前台视图。
using System.Collections.Generic;
using System.Web.Mvc;
using MvcApplication1.Models; namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(GetAllNews());
} private List<News> GetAllNews()
{
return new List<News>()
{
new News()
{
ImgUrl = "images/00b2d8084165c920dee5b19c7b46033b.jpg",
Content = "四年一轮回的夏季，是足球迷的节日，今天，一同来回顾1990年意大利之夏。"
},
......
};
} }
}
Home/Index.cshtml中，需要引入Masonry的相关js文件：masonry.pkgd.min.js和jquery.imagesloaded.min.js。
@model IEnumerable<MvcApplication1.Models.News>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
#wrap {
width:1140px;
margin:0 auto;
border:solid 1px red;
}
.items {
width:300px;
margin:0 8px 14px 0;
text-align:left;
padding:10px;
float:left;
display:none;
border: solid 1px #DDD;
background: #EEE;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
-webkil-box-shadow:0 1px 3px rgba(0, 0, 0, .3);
box-shadow:0 1px 3px rgba(0, 0, 0, .3);
}
.items img {
width:280px;
}
</style>
<div id="wrap">
<div id="container">
@foreach (var item in Model)
{
<div class="items">
<img src="@item.ImgUrl" />
<p>@item.Content</p>
</div>
}
</div>
</div>
@section scripts
{
<script src="~/Scripts/masonry.pkgd.min.js"></script>
<script src="~/Scripts/jquery.imagesloaded.min.js"></script>
<script type="text/javascript">
$(function() {
var container = $('#container .items');
var masonryContainer = $('#container');
container.imagesLoaded(function () {
container.fadeIn();
masonryContainer.masonry({
itemSelector: '.items',
isAnimated: true
});
});
});
</script>
}