Question

使用 desandro.masonry ，我想在每页上显示一张标记：

.stamp {
    position: absolute;
}

.stamp1 {
    margin: 5px;
    left: 20%;
    top: 10px;
    width: 20%;
    height: 100px;
}

当我渲染照片1-20时，这适用于第一页，但当第二页附加到容器时（照片21-40），它会停止工作。第二张邮票非常靠近第一张邮票，与第一页的照片重叠。

这是为照片的第一个分页页面设置样式的初始脚本：

$(document).on('page:change', function () {
    var $box = $('.box');
    $box.hide();
    var $container = $('#masonry-container').masonry(); 
    $container.imagesLoaded(function(){
        $box.fadeIn();
      $container.masonry({
        columnWidth: 10,
        gutterWidth: 0, 
        isAnimated : true,
        resizeable: true,
        itemSelector: '.box',
        stamp: '.stamp',
        fitWidth: true,
      });
    });
});

这是我自制的无限滚动触发next_page。

$(document).on('page:change', function () {
if($('#masonry-scrolling').size() > 0) {
      $('.pagination').hide();
    $(window).on('scroll', function () {
       var url = $('.pagination .next_page a').attr('href');
       if($(window).scrollTop() > $(document).height() - $(window).height() - 60 && $.active == 0) { $.getScript(url) }
    });
    }
});

这是index.js.erb - 这是一个Rails应用程序，这是从上面脚本触发的Rails中的ajax：

var $boxes = $('<%= escape_javascript render :partial  => "photos/masonry"  %>')
var $container = $('#masonry-container')

$boxes.imagesLoaded(function() {
$container.append($boxes).masonry('appended', $boxes);
});

<% if @photos.next_page %>
  $('.pagination').replaceWith('<%= escape_javascript will_paginate(@photos) %>');
  $('.pagination').hide();
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %> 

_masonary.html.erb

<div class="stamp stamp1"> </div>
<% @photos.each do |photo| %>
  <div class="box">
    <div class="mimage">
      <%= link_to(image_tag(photo.picture.insta.url), photo_path(photo)) %>  
    </div>
  </div>  
<% end %>

index.html.erb (example.com/photos)

<div id="masonry-container">
 <%= render :partial => "photos/masonry" %>
</div>
<div id="masonry-scrolling">
<%= will_paginate @photos %>
</div>

砌体中的印章不适用于附加页面

0 个答案: