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