MVC uses Masonry to implement text waterfall stream

With Masonry, you can easily implement waterfall streams. This article implements a simple graphic waterfall effect, as shown below:

 

The two elements of the graphic waterfall stream display are the image path and text content. The corresponding Model is:

namespace MvcApplication1.Models{    public class News    {        public string ImgUrl { get; set; }        public string Content { get; set; }    }}

 

In HomeController, the set instance of the Model is passed to the foreground view.

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 = "four years of reincarnation in summer, is a festival for football fans. Today, let's review the summer of Italy in 1990. "},......};}}}

 

In Home/Index. cshtml, You need to introduce the relevant js files of Masonry: masonry. pkgd. min. js and 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">                                <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>}