MVC借助Masonry实现图文瀑布流
借助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> }