1

我在 ASP.NET 网络表单中创建了一个类似 Pinterest 的布局，我遵循了两个教程

但是，我根据第二个教程在第一个教程中进行了更改，但输出低于

在此处输入图像描述

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

下面是我的代码：

<

style type="text/css">
        body
        {
            background-color:#EEEEEE;
        }
        #imgLoad
        {
            position:fixed;
            bottom:0;   
            left:40%;
            display:none;
        }
               .item {
  width: 220px;
  margin: 10px;
  float: left;
  background-color:honeydew;
}
    </style>


 <div id="container" class="transitions-enabled infinite-scroll clearfix">
       <asp:Repeater ID="Repeater1" runat="server">
           <ItemTemplate>
               <div class="item">
                   <img src="<%# Eval("Url") %>" />
                   <p><%# Eval("Description") %></p>
               </div>
           </ItemTemplate>
       </asp:Repeater>
   </div>

我如何解决它？我相信这与高度有关，可能是中继器控件的行高在列中最高。

我确实尝试过使用 ASp.NET MVC

控制器

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

            return View(model);

看法

  <!--[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>


}

但同样的结果

在此处输入图像描述

编辑 1 我已将脚本更改为

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

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


    </script>

和代码

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

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

</div>
}

但同样的结果

4

2 回答 2

1

好的，有几件事：

  • 您在初始化脚本时拼写错误“Masonry”
  • 在您的项目列表周围放置一个 ID 为“容器”的 div
  • 而不是使用$container.imagesLoaded让整个 javascript 部分在页面加载时运行

像这样：

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

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

然后它应该工作。

于 2013-09-19T18:39:00.643 回答
0

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

https://github.com/yury-egorenkov/pins-grid

于 2015-03-26T08:37:44.630 回答