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

Question

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

我已经设置了一个小的代码测试，但我非常接近，但它不是动态的，我没有用我的最后一个元素到达容器的最边缘。

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