1

ASP.NET WebフォームでPinterestのようなレイアウトを作成しており、次の2つのチュートリアルに従いました

ただし、2 番目のチュートリアルに基づいて最初のチュートリアルに変更を加えたところ、出力を下回っています。

ここに画像の説明を入力

明らかに、これは私が探していたものではありません。2 つの行と列の間のギャップが大きい。

以下は私のコードです：

<

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>


}

でも同じ結果

ここに画像の説明を入力

EDIT 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 "container" の 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 に答える