Javascript 自由墙嵌套墙瓷砖尺寸

Javascript 自由墙嵌套墙瓷砖尺寸,javascript,jquery,html,css,freewalljs,Javascript,Jquery,Html,Css,Freewalljs,我正在使用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


我正在使用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>
结果是.wallcell被很好地放置在.free墙中。 但是手机图像的大小不合适。他们得到一个
高度:0px在样式中

这很奇怪,因为我使用的代码与FreeWall网站中使用的代码几乎相同

我做错了什么

$(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");
});