2017-02-28 68 views
0

求助:问题是砌石护栏的宝石;它使用了一个没有邮票选项的老式石工叉。将砌体CDN添加到项目中可以解决问题。砌体中被戳的物品被完全忽略

我一直在试图在Rails项目中的砖石工程中获得'邮票'功能。我想要的是砌体物品能够贴合在我印记的物体周围的空白空间,并且我的印记物体被锁定在父元素的右上角。但是,加盖的元素看起来完全不在任何砌体中,而是砌在砌砖中的所有东西上,就好像印花不存在于布局中一样。我无法按照我打算的方式工作。

当我在desandro的codepen例子中按下按钮时,没有任何反应:https://codepen.io/desandro/pen/wKpjs,所以我真的不知道我是否有某种浏览器/操作系统/库问题,或者我只是盖错了。

这是网页的当前状态: images tiled underneath stamped element, instead of tiled around it

布局HAML:

#signupGal.centered 
    - if @displayPix.present? 
    - @displayPix.each_with_index do |pic,i| 
     = link_to pic do 
      .picTile{:id => "tile#{i}"} 
       :javascript 
        $('#tile#{i}').css({ 
         "background-image":'url(' + "#{pic.image.url(:medium)}" + ')', 
         "background-position":"center", 
         "background-size":"cover" 
        }); 

    .signupForm.bg.tc 

CSS:

.bg { 
    background-color: rgb(63,168,161); 
} 

.tc { 
    color: white; 
} 

.signupForm { 
    width: 752px; 
    height: 558px; 
    position: absolute; 
    right: 1%; 
    top: 10px; 
    width: 80%; 
    border-radius: 5px; 
    border: 3px solid white; 
    padding: 1em; 
} 

#signupGal { 
    max-width: 1200px; 
    position: relative; 
    .picTile { 
     width: 160px; 
     height: 120px; 
     float: left; 
     margin-bottom: 3px; 
     margin-right: 3px; 
    } 
} 

/* clearfix */ 
#signupGal:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

而在CoffeeScript的文件:

$ -> 
    $('#signupGal').imagesLoaded -> 
     $gallery = $('#signupGal') 
     $gallery.masonry 
      isAnimated: true 
      isFitWidth: true 
      itemSelector: '.picTile' 
      stamp: '.signupForm' 

回答

0

这个问题是因为我使用了masonry-rails gem,它的砌体分支是3.x,并且其印记功能和界面与当前文档不同。没有错误或警告,“邮票”选项从字面上看没有任何作用。一旦我删除了gem并添加了当前的砌体CDN,上面的代码就开始显示预期的行为。

这个问题被jsfiddle和codepen混淆了,因为大量代码示例的混合内容导致失败(直到控制台被打开)。