自适应浮动表单填充布局脚本
生活随笔
收集整理的這篇文章主要介紹了
自适应浮动表单填充布局脚本
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果
1、適合搜素表單布局，查詢重置等功能塊始終位于最后一行的最后一列
2、適合普通多行兩端對齊，未填充滿的行左對齊
思路
代碼
此版本為jquery版，不過只是借用了其事件觸發功能用以適應屏幕縮放，其他功能性腳本均為原生js,可以很容易轉為其他框架比如vue
需要注意的是，所有的塊默認為float:left
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><style>div {box-sizing: border-box;}.fit-box {border: 1px solid #aaa;}.fit-box:after {content: '';display: block;clear: both}.box {float: left;/*默認左浮動,必須*/width: 121px;height: 40px;margin-top: 10px;background: #c8c8c8;/*border: 1px solid #72b48b;*/}</style> </head> <body> <!--div.fill-box*5>{$}--> <div class="fit-box"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">6</div><div class="box">7</div><div class="box">8</div><div class="box">9</div><div class="box">10</div><div class="box">11</div><div class="box">12</div><div class="box">13</div><div class="box">14</div><div class="box">15</div> </div> <script src="../../lib/jquery-1.11.3.min.js"></script> <script>;(function () {function DriftBox($el, options) {this._$el = $el;this._options = $.extend({}, options);}DriftBox.prototype = {init() {let _this = this;let { _$el, _options } = _this//初始化時執行一次計算_this.calculate();//監聽窗口變動_$el.on('RZ', (e) => {((fn, params, time) => {//如果當前存在延時，則清除并重新添加，注意保持method對象的穩定性，不然可能導致tId丟失clearTimeout(fn.tId);fn.tId = setTimeout(() => fn.call(_this, params), time)})(_this.calculate, e, _options.throttleTime)});$(window).resize(() => _$el.trigger($.Event('RZ')));},/*** FillBox寬度固定,需要計算每行數量,邊距**/calculate() {let { searchLayout: isSearchLayout, marginRight: mr, boxSelector } = this._optionslet el = this._$el[0]let boxArr = el.querySelectorAll(boxSelector); //獲取所有BOXlet boxNum = boxArr.length;if (boxNum) {let rw = el.clientWidth,//行寬bw = boxArr[0].offsetWidth, //TODO 只考慮BOX同寬,BOX不同寬易導致自動分配的margin過大且需要傳送式計算每行BOX數量num = Math.floor((rw + mr) / (bw + mr)), //每行最多幾個BOxrowNum = Math.ceil(boxNum / num);//分幾行if (num) {mr = Math.floor((rw - num * bw) / (num - 1));console.log("num:", num, 'rw:', rw, 'bw:', bw, 'mr:', mr)//滿行最后一個BOX不設置margin-right;boxArr.forEach((d, i) => d.style.marginRight = (i + 1) % num && mr + 'px');//如果是類似表單查詢的布局,查詢和重置|按鈕所在box需要右對齊if (isSearchLayout) {boxArr[boxNum - 1].style.marginRight = 0boxArr[boxNum - 1].style.float = 'right'}//浮點計算的不準確可能導致每行差幾個像素,在視覺上不會太明顯,默認將這些插值添加到每行的第一個非右對齊的元素let dif = rw - num * bw - (num - 1) * mr//處理每行的差值let box, marginRight, i, j, m;for (i = 0; i < rowNum; i++) {for (j = 0, m = 0; j < dif; m++) {box = boxArr[i * num + m % num]marginRight = parseInt(box.style.marginRight)if (box.style.float == 'right') breakif (marginRight) {box.style.marginRight = marginRight + 1 + 'px'j++}}}console.log('dif:', dif, 'rowNum:', rowNum)}/*** 如果容器高度過大導致外層出現滾動條壓縮壓縮容器寬度,會使得計算的margin偏小,* 因此需要在計算完成后重新進行比對，如果容器寬度變化則重新計算一次*/requestAnimationFrame(() => rw != el.clientWidth ? this.calculate() : '')}}}$.fn.DriftBox = function (options) {this.each(function (index, el) {new DriftBox($(el), options).init()});return $(this)} })();$('.fit-box').DriftBox({boxSelector: '.box',searchLayout: false,throttleTime: 150,marginRight: 20,//假如指定盒子最小邊距為20像素 });</script> </body> </html>總結
以上是生活随笔為你收集整理的自适应浮动表单填充布局脚本的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 找不到符号 con_我的jav
- 下一篇： 升级浏览器_微软IE11浏览器 最后的升