用vue.js寫的一個瀑布流的組件

AlphaWallet 發布于2019-08-21 12:01 / 2494人閱讀

摘要：有三個參數將被渲染的元素是一個，在渲染子元素的合適時機例如的事件里，調用即可。從里面拿到一個元素，找出當前高度最小的一列，將放入該列。渲染，然后調用方法進入瀑布流還有個常見的功能就是滾動加載了，目前尚未加入此功能，會盡快加上。

很少寫文章，很亂，，見諒。

我所見過的瀑布流都是固定的幾列，然后每一列包含若干個元素（圖文元素），每一列的總高度都差不多。
所以我這個組件的功能就很簡單，可以設置列數量，然后只要再寫一個渲染元素的方法，即可使用。

組件說明

組件名：

參數名	類型	說明
data	Array	數據源
column_size	Number	列的數量
renderItem	Function	目前只能通過render函數渲染子元素，還不支持模板。有三個參數 h, item,將被渲染的元素 next,是一個function，在渲染子元素的合適時機（例如img的onload事件里），調用next()即可。如不調用next將只能渲染一個元素，無法繼續渲染。

源代碼在此

一個簡單的使用例子如下：

export default {
    data() {
        // 隨機生成20個測試數據
        const num = 20;
        var list = new Array(num).fill(0).map((v, i) => {
            return this.createItem(i);
        })
        return {
            list,
        }
    },
    // 直接用render函數來寫，因為我覺得這樣寫props更直觀一點
    render(h){
        return h("tag-autoflow", {
            props:{
                // 設置列數量
                column_size:3,
                // 數據源
                data: this.list,
                // 渲染item的方法，參數目前提供三個
                // h 瀑布流組件的createElement方法，非父組件的
                // item 要渲染的元素對象
                // next 必須主動調用next，插件才會自動去渲染下一個元素，詳細說明見下文
                renderItem(h, item, next){
                    // 簡單的渲染一個img跟一個p標簽
                    // 因為img標簽的圖片加載需要時間，而圖片影響了計算所在列的高度
                    // 所以需要在img觸發了load事件后，再去調用next渲染下一個item。
                    return h("div", [
                        h("img", {
                            attrs: {
                                src: item.img
                            },
                            on: {
                                load: e => {
                                    next();
                                }
                            }
                        }),
                        h("p", item.title)
                    ])
                },
            },
        });
    },
    methods:{
        createItem(i) {
            var title = i + "," + new Array(_.random(10, 150)).fill("哈").join("");
            var img = `http://via.placeholder.com/${_.random(100, 400)}x${_.random(100, 400)}`;
            return {
                img,
                title,
            }
        },
    }
}

放一張渣渣效果圖吧。。。

代碼里是一次性生成的20個元素，頁面渲染的時候，很明顯的能看出來是在一個img觸發了load事件之后才渲染下一個元素。
如果花點心思加一些動畫效果應該很酷吧。

如果你要渲染的item不包含圖片，純文字的話，可以通過這種寫法調用next。保證了計算列高度的準確性。

renderItem(h, item, next){
    this.$nextTick(function(){
        next();
    });
    return h("p", item.title);
},

瀑布流的流程說明

先根據參數生成對應數量的列，

判斷data是否有元素，沒有就結束。

從data里面shift()拿到一個元素item，

找出當前高度最小的一列，將item放入該列。

渲染item，然后調用next()方法進入2

TODO

瀑布流還有個常見的功能就是滾動加載了，目前尚未加入此功能，會盡快加上。

元素加載的過渡動畫

云服務器 GPU云服務器用JavaScript寫的 linux用什么寫的 webrtc用什么寫的 python用c寫的

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

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

angular組件－特殊的瀑布流（原創）

摘要：正如上篇文章說的，由于項目中的樣式有點特殊要求，所以自己在項目中寫了一個瀑布流組件，在這里分享下，由于最近沒太多時間，趁中秋把這個組件發上來，寫的不是很詳細，畢竟中秋，我的心已經發出去啦。 ng-water-scroll 正如上篇文章說的，由于項目中的樣式有點特殊要求，所以自己在項目中寫了一個瀑布流組件，在這里分享下，由于最近沒太多時間，趁中秋把這個組件發上來，寫的不是很詳細，畢竟中秋...

Yi_Zhi_Yu 2019-08-20 11:02 評論0 收藏0
angular組件(ngKeybordSelect)－通過鍵盤實現多選

摘要：在剛剛結束的交易系統項目中有幾個需求是讓我感覺要花點時間的如何更優雅的使用的框。通過鍵盤實現多選，批量選的功能。所以自己寫了后面兩個指令。在剛剛結束的angular交易系統項目中有幾個需求是讓我感覺要花點時間的如何更優雅的使用angular-bootstrap 的 Modal框。通過鍵盤實現ctrl多選，shfit批量選的功能。如何在angular去實現瀑布流后面兩個我都...

novo 2019-08-20 10:33 評論0 收藏0
【簡單好用，支持懶加載】 vue-waterfall2 基于Vue.js 瀑布流組件

摘要：不需知道元素寬高，可寬高自適應自定義程度高支持懶加載提供端滑動到底部觸發，端需要上拉觸發使用極為簡便適用于有問題歡迎提前端工程化算法注意需要與一起使用才會生效，否則會進行自適應寬度使用布局時，需先計算出自適應后的寬度再傳值使用了的 vue-waterfall2 1.不需知道元素寬高，可寬高自適應 2.自定義程度高 3.支持懶加載(lazy-src) 4.提供Event:loadmor...

james 2019-08-26 12:24 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
avalon與masonry的結合

摘要：相關組件版本最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結果很令人沮喪，依然沒有控制節點的位置，所以應該不是這個問題。相關組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發后臺...

Kosmos 2019-08-22 10:59 評論0 收藏0