Question

我正在使用FreeWall来创建一个应该是这样的网格：

布局草图：

这是我目前的HTML：

<div class="free-wall">
   <div class="wallcell" data-delay="1" data-height="300" data-width="300" data-cellW=100 data-cellH=100 data-state="move" data-nested=".cellImage">
      Brands    
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/770467680012890112/kSz1jtnn.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/378800000224166791/b8d346a6b66796687a649763d6b91936.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/808733554574237696/0Ld_gdau.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/587131394096107520/4RFYgoKG.png"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/551878698152914944/JwmVmkeK.png"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/459373156919029760/kJ77xlgo.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/445427923554562048/dYJF3HXV.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/717482089369571328/iJw-_LKr.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/647030571718324224/Nj7V2ziU.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
   </div>
   <div class="wallcell" data-delay="1" data-height="300" data-width="300" data-cellW=100 data-cellH=100 data-state="move" data-nested=".cellImage">
      Celebrities    
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/504060630450438144/3tEN_Y7C.png"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/74188698/NeilTysonOriginsA-Crop.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/778612048037081088/_Tdu-9EG.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/799025065538908160/SqE71pW7.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/786240454270607361/U_5yj9y8.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/711979086210539520/AOh5fBuR.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
   </div>
   <div class="wallcell" data-delay="1" data-height="300" data-width="300" data-cellW=100 data-cellH=100 data-state="move" data-nested=".cellImage">
      Cultural    
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/755902693802184704/4_Vo3RV4.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/466953024271679488/3rftwYWT.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/806618533127864320/jb2g0IW_.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
   </div>
   <div class="wallcell" data-delay="1" data-height="300" data-width="300" data-cellW=100 data-cellH=100 data-state="move" data-nested=".cellImage">
      Politicians    
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/802146519390556160/P1LmIpho.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/2044852218/NYT_Twitter_Krugman.png"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/746717575522959360/3adKV8CC.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/732577348508340224/P8HnltSv.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
   </div>
   <div class="wallcell" data-delay="1" data-height="300" data-width="300" data-cellW=100 data-cellH=100 data-state="move" data-nested=".cellImage">
      Sports    
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/806926049821028352/yV90rz0y.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/688480097817509893/8bhRYP5U.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/789034683308834816/uvJy-LC9.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/723624251916451840/OXuv5JVJ.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/801828822643511296/P9IucyDY.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/804697712734175232/42DnCaO2.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/526740757471059968/kpa_oDqp.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/378800000276630272/8b80e254f99141465a4755bc57322944.jpeg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
      <div class='cellImage' style='background-image: url("http://pbs.twimg.com/profile_images/667010765191163904/JGhFP_xN.jpg"); background-size: cover; height: 30%; width: 30%;' data-state='move'></div>
   </div>
</div>

（这是用PHP动态生成的）

JavaScript：

$(function() {
    $(".free-wall").each(function() {
        var wall = new Freewall(this);
        wall.reset({
            selector: '.wallcell',
            cellW: 300,
            cellH: 300,
            fixSize: 10,
            gutterY: 20,
            gutterX: 20,
            onResize: function() {
                wall.fitWidth();
            }
        });
        wall.fitWidth();
    });
    $(window).trigger("resize");
});

结果是.wallcell非常好地放置在.free-wall中。但是cellImages没有合适的尺寸。他们的风格为height: 0px;。

这很奇怪，因为我使用与FreeWall网站中使用的几乎相同的代码作为示例。

我做错了什么？

Here is a jsfiddle

FreeWall嵌套墙砖尺寸

0 个答案: