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>
}