Asp.net mvc 4 在ASP.NET Web窗体中创建类似Pinterest的布局

我正在ASP.NETWebForm中创建一个类似Pinterest的布局，并遵循以下两个教程

然而，我在第一个教程中根据第二个教程进行了更改，我得到了以下输出

显然，这不是我想要的。两行和两列之间的间距很大

下面是我的代码：

身体 { 背景色：#EEEEEE； } #伊姆格洛德 { 位置：固定； 底部：0； 左：40%； 显示：无； } .项目{ 宽度：220px； 利润率：10px； 浮动：左； 背景色：蜜露； } " />

我怎么修理它？ 我相信这与高度有关，可能是中继器控制的行高在列中取最高

我确实尝试过用ASp.NETMVC来实现它

控制器

IEnumerable<Product> model = ProductRepository.GetData(1, 25);

            return View(model);

IEnumerable model=ProductRepository.GetData（1,25）；
返回视图（模型）；

查看

  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">


        .item {
  width: 220px;
  margin: 5px;
  float: left;
  background-color:honeydew;
}

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/Mansory.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $container = $('#container');

        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.item',
                columnWidth: 100,
                isAnimated: false
            });
        });

    </script>




@foreach (var item in Model) {

     <div class="item">

        <img src="@(item.Url)" />
                  @Html.DisplayFor(modelItem => item.Description)
    </div>


}

.项目{
宽度：220px；
保证金：5px；
浮动：左；
背景色：蜜露；
}
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
itemSelector:“.item”，
列宽：100，
isAnimated:错
});
});
@foreach（模型中的var项目）{
@DisplayFor（modelItem=>item.Description）
}

但同样的结果

编辑1 我已将脚本更改为

<script type="text/javascript">
        $(function () {
            var $container = $('#container');

            $container.masonry({
                itemSelector: '.item',
                columnWidth: 240,
                isAnimated: false
            });
        });


    </script>

$（函数（）{
var$container=$（“#container”）；
$container.com({
itemSelector:“.item”，
列宽：240，
isAnimated:错
});
});

和代码

@foreach (var item in Model) {
    <div id="container">
     <div class="item">

        <img src="@(item.Url)" />
                  @Html.DisplayFor(modelItem => item.Description)
    </div>

</div>
}

@foreach（模型中的变量项）{
@DisplayFor（modelItem=>item.Description）
}

但是同样的结果

好的，有几件事：

• 初始化脚本时，您将“砌体”拼写错误
• 在项目列表周围放置一个Id为“container”的div
• 在加载页面时，不要使用

  $container.imagesLoaded

  使整个javascript部分运行

像这样：

$(function(){ 
    var $container = $('#container');

    $container.masonry({
            itemSelector: '.item',
            columnWidth: 240,
            isAnimated: false
    });
});

那么它应该可以工作了。

好的，有几件事：

• 初始化脚本时，您将“砌体”拼写错误
• 在项目列表周围放置一个Id为“container”的div
• 在加载页面时，不要使用

  $container.imagesLoaded

  使整个javascript部分运行

像这样：

$(function(){ 
    var $container = $('#container');

    $container.masonry({
            itemSelector: '.item',
            columnWidth: 240,
            isAnimated: false
    });
});

---

这是一个实现Pinterest布局的小型库。填充网格从左到右。可以在配置中为每个分辨率自定义列数。调整大小时可以自适应更改列数。图像可以在管脚上下移动

---

这是一个实现Pinterest布局的小型库。填充网格从左到右。可以在配置中为每个分辨率自定义列数。调整大小时自适应更改列数。图像可以在pin上下移动

---

请检查我问题中的“编辑1”部分。我做了更改，但我仍然面临问题。您是否解决了您的massy.js名为“Scripts/Mansory.js”的问题“？是的，我是从官方网站下载的，我保留了相同的名字，现在我可以看到响应能力和动态安排。我认为身高是个问题。我可以看到每一行都从它的列中获取最大高度。。只是猜测而已不，身高与此无关。看起来您已经描述了，因为该脚本未运行。如果控制台中记录了任何错误，请使用FireBug或类似工具进行检查。请检查我问题中的编辑1部分。我做了更改，但我仍然面临问题。你是否解决了你的massy.js名为“Scripts/Mansory.js”的问题？是的，我从官方网站下载了，我保留了相同的名称，现在我可以看到响应能力和动态安排。我认为身高是个问题。我可以看到每一行都从它的列中获取最大高度。。只是猜测而已不，身高与此无关。看起来您已经描述了，因为该脚本未运行。如果控制台中记录了任何错误，请使用FireBug或类似工具进行检查。