資訊專欄INFORMATION COLUMN
摘要：多行布局下就會導(dǎo)致每行的品牌布局參差不齊，嚴(yán)重影響美觀。于是就有了本篇的木桶布局插件。木桶布局的實現(xiàn)是這樣分步驟的首先對要填放的內(nèi)容進(jìn)行排序，篩選出每一行的元素。
????公司最近在重構(gòu)，使用的是Vue框架。涉及到一個品牌的布局，因為品牌的字符長度不一致，所以導(dǎo)致每一個的品牌標(biāo)簽長短不一。多行布局下就會導(dǎo)致每行的品牌布局參差不齊，嚴(yán)重影響美觀。于是就有了本篇的木桶布局插件。
首先對要填放的內(nèi)容進(jìn)行排序，篩選出每一行的元素。
再對每一行元素進(jìn)行修整，使其美觀對齊。
分步驟????首先獲取我們需要的元素、和我們目標(biāo)容器的寬度。
Vue組件容器:
this.barrelBox = this.$refs.barrel;
this.barrelWidth = this.barrelBox.offsetWidth;
ps:對于元素的寬度獲取的時候我們需要對盒模型進(jìn)行區(qū)分。
Array.prototype.forEach.call(items, (item) => {
paddingRight = 0;
paddingLeft = 0;
marginLeft = parseInt(window.getComputedStyle(item, "").getPropertyValue("margin-left"));
marginRight = parseInt(window.getComputedStyle(item, "").getPropertyValue("margin-right"));
let boxSizing = window.getComputedStyle(item, "").getPropertyValue("box-sizing");
if (boxSizing !== "border-box") {
paddingRight = parseInt(window.getComputedStyle(item, "").getPropertyValue("padding-right"));
paddingLeft = parseInt(window.getComputedStyle(item, "").getPropertyValue("padding-left"));
}
widths = item.offsetWidth + marginLeft + marginRight + 1;
item.realWidth = item.offsetWidth - paddingLeft - paddingRight + 1;
let tempWidth = rowWidth + widths;
if (tempWidth > barrelWidth) {
dealWidth(rowList, rowWidth, barrelWidth);
rowList = [item];
rowWidth = widths;
} else {
rowWidth = tempWidth;
rowList.push(item);
}
})
const dealWidth = (items, width, maxWidth) => {
let remain = maxWidth - width;
let num = items.length;
let remains = remain % num;
let residue = Math.floor(remain / num);
items.forEach((item, index) => {
if (index === num - 1) {
item.style.width = item.realWidth + residue + remains + "px";
} else {
item.style.width = item.realWidth + residue + "px";
}
})
}
????我這邊是采用的平均分配的方式將多余的寬度平均分配到每一個元素里。如一行中全部元素占800px，有8個元素，該行總長為960px。則每行增加的寬度為(960-800)/8=16，每個與元素寬度增加16px;
????值得注意的是,js在獲取元素寬度的時候會存在精度問題，所以需要進(jìn)行預(yù)設(shè)一個像素進(jìn)行緩沖。
Github:vue-barrel
npm: vue-barrel
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98779.html
摘要：面試總結(jié)工作久了有時候也需要出去看看。前幾天大搜車的約了面試，就記錄一下關(guān)于這次面試的具體內(nèi)容。給出大致思路，參數(shù)回調(diào)函數(shù)事件。采用去觸發(fā)事件，在組件注冊相應(yīng)的事件來達(dá)到交互的目的。 面試總結(jié) 工作久了有時候也需要出去看看。 前幾天大搜車的hr約了面試，就記錄一下關(guān)于這次面試的具體內(nèi)容。 一、筆試 先填寫了個人信息，第一步就是筆試。 哪種盒模型包含padding header中哪種標(biāo)...
摘要：前端日報精選變量聲明與賦值值傳遞淺拷貝與深拷貝詳解淺談自適應(yīng)學(xué)習(xí)比你想象的要簡單常見排序算法之實現(xiàn)世界萬物誕生記中文深入理解筆記與異步編程譯不可變和中的知乎專欄譯怎樣避免開發(fā)時的深坑瘋狂的技術(shù)宅在翻譯網(wǎng)格布局掘金詳解改變模糊度亮 2017-08-15 前端日報 精選 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解淺談web自適應(yīng)學(xué)習(xí) React.js 比你想象的要簡單常見排序算法之...
摘要：如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信阿里調(diào)用等本地存儲方式頁面可見性可以有哪些用途通過的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放網(wǎng)頁驗證碼是干嘛的，是為了解決什么安全問題。 前端面試題總結(jié)——綜合問題(持續(xù)更新中) 1.頁面從輸入URL到頁面加載顯示完成，這個過程中都發(fā)生了什么？（流程說的越詳細(xì)越好） 1.輸入域名地址2.發(fā)...
摘要：如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信阿里調(diào)用等本地存儲方式頁面可見性可以有哪些用途通過的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等在頁面被切換到其他后臺進(jìn)程的時候，自動暫停音樂或視頻的播放網(wǎng)頁驗證碼是干嘛的，是為了解決什么安全問題。 前端面試題總結(jié)——綜合問題(持續(xù)更新中) 1.頁面從輸入URL到頁面加載顯示完成，這個過程中都發(fā)生了什么？（流程說的越詳細(xì)越好） 1.輸入域名地址2.發(fā)...
閱讀 3528·2021-10-08 10:04
閱讀 876·2019-08-30 15:54
閱讀 2190·2019-08-29 16:09
閱讀 1357·2019-08-29 15:41
閱讀 2287·2019-08-29 11:01
閱讀 1747·2019-08-26 13:51
閱讀 1037·2019-08-26 13:25
閱讀 1837·2019-08-26 13:24
