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>

}

巴特西

MVC借助Masonry实现图文瀑布流

最新文章

热门文章