jquery - 跨越容器宽度的重叠内联元素

Question

我正在尝试创建一个“书架”样式的导航，在响应式容器中包含重叠元素。书籍数量需要是动态的，我需要它们的间距基于容器宽度、要创建的书籍数量和每本书的偏移量，直到它填满容器。

我已经设置了一些 codepen 测试，我已经非常接近了，但是它不是动态的，我的最后一个元素还没有完全到达容器的最远边缘。

codepen

book.each(function (i) {
  var num = i;
  $(this).css({
      marginLeft: (num * (margin - 10)),
      zIndex: (book.length) - num
  });
});

Answer 1

嗨，我不确定，但我希望这是你的意思

book.each(function (i) {
  var v = container.width();
  var w = book.width();
  var x = (book.length - 1);
  var vw = ((v - w)/x);
  var num = i;
  $(this).css({
   left: (num * vw) + 'px',
   zIndex: (x) - num
  });
});

http://codepen.io/anon/pen/gbjRoW