Vue木桶布局插件

hersion 發布于2019-08-23 12:35 / 1954人閱讀

摘要：多行布局下就會導致每行的品牌布局參差不齊，嚴重影響美觀。于是就有了本篇的木桶布局插件。木桶布局的實現是這樣分步驟的首先對要填放的內容進行排序，篩選出每一行的元素。

????公司最近在重構，使用的是Vue框架。涉及到一個品牌的布局，因為品牌的字符長度不一致，所以導致每一個的品牌標簽長短不一。多行布局下就會導致每行的品牌布局參差不齊，嚴重影響美觀。于是就有了本篇的木桶布局插件。

木桶布局的實現是這樣分步驟的：

首先對要填放的內容進行排序，篩選出每一行的元素。

再對每一行元素進行修整，使其美觀對齊。

分步驟

一、根據需要選出每行的元素

????首先獲取我們需要的元素、和我們目標容器的寬度。

Vue組件容器:

二、再者我們需要獲取容器和容器寬度

this.barrelBox = this.$refs.barrel;

this.barrelWidth = this.barrelBox.offsetWidth;

三、接著循環我們的元素，根據不同的元素的寬度進行分組。

ps:對于元素的寬度獲取的時候我們需要對盒模型進行區分。

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在獲取元素寬度的時候會存在精度問題，所以需要進行預設一個像素進行緩沖。

以下是我的代碼地址

Github:vue-barrel

npm: vue-barrel

云服務器 GPU云服務器 vue插件木桶 Vue_Vue Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98779.html

大搜車面試總結

摘要：面試總結工作久了有時候也需要出去看看。前幾天大搜車的約了面試，就記錄一下關于這次面試的具體內容。給出大致思路，參數回調函數事件。采用去觸發事件，在組件注冊相應的事件來達到交互的目的。面試總結工作久了有時候也需要出去看看。前幾天大搜車的hr約了面試，就記錄一下關于這次面試的具體內容。一、筆試先填寫了個人信息，第一步就是筆試。哪種盒模型包含padding header中哪種標...

ziwenxie 2019-08-23 16:04 評論0 收藏0
2017-08-15 前端日報

摘要：前端日報精選變量聲明與賦值值傳遞淺拷貝與深拷貝詳解淺談自適應學習比你想象的要簡單常見排序算法之實現世界萬物誕生記中文深入理解筆記與異步編程譯不可變和中的知乎專欄譯怎樣避免開發時的深坑瘋狂的技術宅在翻譯網格布局掘金詳解改變模糊度亮 2017-08-15 前端日報精選 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解淺談web自適應學習 React.js 比你想象的要簡單常見排序算法之...

xinhaip 2019-08-22 10:53 評論0 收藏0
前端面試題總結——綜合問題(持續更新中)

摘要：如何實現瀏覽器內多個標簽頁之間的通信阿里調用等本地存儲方式頁面可見性可以有哪些用途通過的值檢測頁面當前是否可見，以及打開網頁的時間等在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放網頁驗證碼是干嘛的，是為了解決什么安全問題。前端面試題總結——綜合問題(持續更新中) 1.頁面從輸入URL到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好） 1.輸入域名地址2.發...

Lin_YT 2019-08-30 13:59 評論0 收藏0
前端面試題總結——綜合問題(持續更新中)

摘要：如何實現瀏覽器內多個標簽頁之間的通信阿里調用等本地存儲方式頁面可見性可以有哪些用途通過的值檢測頁面當前是否可見，以及打開網頁的時間等在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放網頁驗證碼是干嘛的，是為了解決什么安全問題。前端面試題總結——綜合問題(持續更新中) 1.頁面從輸入URL到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好） 1.輸入域名地址2.發...

elarity 2019-08-01 18:38 評論0 收藏0