- <!DOCTYPE html><html><head><meta charset="utf-8">
- <title>不管神马标签总能右侧对齐</title>
- <script type="text/javascript" src1="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
- <style type="text/CSS" media="screen">
- * { margin: 0; padding: 0; font-size:13px; }
- .clear:before, .clear:after { content:''; display:table; }
- .clear:after { clear:both; }
- .clear { zoom:1; }
- .item_list { background: #fff; width: 300px; margin: 100px; }
- .item_list a {
- text-align:center; color: #fff; text-decoration: none; background: #369; display: block;
- float: left; padding:5px 10px; margin: 0 2px 2px 0; border: 0px solid red;
- }
- .item_list a:hover { background: #DD1111; }
- </style>
- </head>
- <body>
- <div class="item_list clear">
- <a href="0.html" class="on">全部</a>
- <a href="1.html">ajax</a>
- <a href="2.html">php</a>
- <a href="3.html">node.js</a>
- <a href="4.html">python</a>
- <a href="5.html">mysql</a>
- <a href="6.html">sqlite</a>
- <a href="7.html">asp</a>
- <a href="8.html">jsp</a>
- <a href="9.html">jquery</a>
- <a href="10.html">nginx</a>
- <a href="14.html">redis</a>
- <a href="15.html">HTML5</a>
- <a href="15.html">好</a>
- <a href="11.html">Action Script 3.0</a>
- <a href="12.html">JAVA</a>
- <a href="13.html">Android</a>
- <a href="16.html">C++</a>
- <a href="18.html">PhotoShop CS</a>
- <a href="18.html">Notepad++</a>
- <a href="17.html">不管神马标签</a>
- <a href="17.html">总能</a>
- <a href="17.html">让右侧</a>
- <a href="17.html">对齐哈</a>
- </div>
- <script type="text/javascript">
- $(function(){
- //自动均匀布局标签
- var $target = $('.item_list');
- var $items = $('.item_list > a');
- var max_width = $target.width(); //box宽度
- var count = $items.size(); //所有单元个数统计
- var index = 0; //当前初始索引位置
- var tmp = 0;
- $items.each(function(){
- var $curr = $(this); //当前年item的DOM对象
- var outer_width = $curr.outerWidth(true); //区块宽度,含边框
- var border_width = outer_width - $curr.outerWidth(); //左右边框宽度
- tmp += outer_width; //计算每个item相加的值
- //遍历单元凑齐宽度
- if ( tmp > max_width ) {
- var $point = $curr.prev();
- var plus = max_width-(tmp-outer_width);
- avg_width($point, plus + border_width);
- tmp = outer_width;
- }
- //最后一个元素调整
- if ( $curr.is(':last-child') ) {
- var plus = max_width - tmp;
- avg_width($curr, plus + border_width);
- }
- });
- //均匀化各项平均宽度
- function avg_width($point, add_width) {
- //创建一个表示元素索引范围的数组
- var arr = range(index, $point.index());
- var add = Math.floor(add_width/arr.length);
- var end = add_width % arr.length;
- for ( var i in arr ) {
- var $item = $items.eq( arr[i] );
- $item.width($item.width()+add);
- }
- $point.width($point.width()+end);
- $point.css('margin-right', 0);
- index = $point.index()+1;
- }
- //生成指定范围的数组
- function range(low, high, step) {
- var matrix = [];
- var inival, endval, plus;
- var walker = step || 1;
- var chars = false;
- if (!isNaN(low) && !isNaN(high)) {
- inival = low;
- endval = high
- } else if (isNaN(low) && isNaN(high)) {
- chars = true;
- inival = low.charCodeAt(0);
- endval = high.charCodeAt(0)
- } else {
- inival = (isNaN(low) ? 0 : low);
- endval = (isNaN(high) ? 0 : high)
- }
- plus = ((inival > endval) ? false: true);
- if (plus) {
- while (inival <= endval) {
- var char_code = String.fromCharCode(inival);
- matrix.push(((chars) ? char_code : inival));
- inival += walker
- }
- } else {
- while (inival >= endval) {
- var char_code = String.fromCharCode(inival);
- matrix.push(((chars) ? char_code : inival));
- inival -= walker
- }
- }
- return matrix;
- }
- });
- </script>
- </body></html>
- //该片段来自于http://www.codesnippet.cn/detail/2511201411047.html
来源: http://www.codesnippet.cn/detail/2511201411047.html