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

Question

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

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

代码笔

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