Question

我正在ASP.NET webform中创建类似Pinterest的布局，我遵循了两个教程

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

enter image description here

显然，这不是我所期待的。两行和两列之间的差距很大。

以下是我的代码：

＆LT;

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>


}

但结果相同

enter image description here

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

但结果相同

Answer 1

好的，有些事情：

初始化脚本时，您拼错了“Masonry”
在您的商品列表中放置带有“容器”的div
而不是使用$container.imagesLoaded使页面加载时运行整个javascript部分

像这样：

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

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

然后它应该工作。

Answer 2

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

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

在ASP.NET webform中创建类似于布局的Pinterest

2 个答案: