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

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

其思路如下：

先计算总体高度和宽度（不加margin间隔情况下，sprite宽度等于各个小图标的宽度之和；sprite高度等于各个小图标的高度之和）；
从 左下角向右上角 ，逐个排列小图标，并且计算其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

随机推荐

硅谷互联网公司的开发流程
开发流程包括这么几个阶段: OKR 的设立; 主项目及其子项目的确立; 每个子项目的生命周期; 主项目的生命周期; 收尾、维护、复盘。第一点，OKR 的设立所有项目的起始，都应该从 Ro
RESTful-表述性状态转移风格
REST英文全拼：Representational State Transfer 面向资源编程资源指的就是一类数据产品表->就是产品资源最重要的是如何表示一个资源地址即
稳定性思考
产品功能线 0-1：当系统从无到有的时候，首要考虑的是研发效率，功能快速迭代，满足快速增长的业务需求 1-10 系统已经搭建起来，此时考虑的是系统的稳定性。可用性：1.隔离：区分出核心和非核心功能
Supervisor守护队列发邮件
安装 CentOS： yum -y install supervisor Debien/Ubuntu适用：apt-get install supervisor 配置修改主配置文件：vim /et
安装libsodium，让服务器支持chacha20等加密方式
用chacha20加密方式需要安装libsodium 注意：libsodium从1.0.15开始就废弃了aes-128-ctr yum install wget m2crypto git libsod

技术文档网

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

相关文章

随机推荐