简单计算对角线布局的css sprite大图中各个小图标的position定位值 - dongyuwei/blog GitHub Wiki

compass sprite 可以生成正对角线（即 left-bottom 到right-top ）方式布局的css sprite大图,参见 http://compass-style.org/help/tutorials/spriting/sprite-layouts/ 。

其思路如下：

1. 先计算总体高度和宽度（不加margin间隔情况下，sprite宽度等于各个小图标的宽度之和；sprite高度等于各个小图标的高度之和）；
2. 从 左下角向右上角 ，逐个排列小图标，并且计算其left和top属性值。 明白布局原理了，代码实现就很简单了，如下：

#计算sprite大图高度和宽度
def calculate_diagonal_dimensions
   @width = @images.inject(0) {|sum, img| sum + img.width}
   @height = @images.inject(0) {|sum, img| sum + img.height}
end

#从 **左下角向右上角** ，逐个排列小图标，并且计算小图标的left和top属性值
def calculate_diagonal_positions
   previous = nil
   @images.each_with_index do |image, index|
      if previous.nil?
         previous = image
         image.top = @height - image.height
         image.left = 0
         next
      end
      image.top = previous.top - image.height
      image.left = previous.left + previous.width
      previous = image
   end
end

参见compass sprite源码https://github.com/chriseppstein/compass/blob/stable/lib/compass/sass_extensions/sprites/layout_methods.rb#L106