avalon與masonry的結合

Kosmos 發布于2019-08-22 10:59 / 2907人閱讀

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

相關組件版本：avalon 1.3.6、masonry 3.1.5

最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發后臺的過程中，對avalon也用得挺熟手的了，所以這次做前臺也用上。由于avalon是管dom的，masonry也是管dom的，所以實現兼容的重點就是，讓它們管同一份dom，而不是各管各的。

我的avalon相關代碼是這樣的：

    avalon.define({
      $id: "masonry",
      article_list: ,
    });

其中的article_list便是存放瀑布流數據的數組，用php生成json格式的字符串輸出，賦給article_list作為初值（第一版數據）。然后，調用avalon的ms-repeat指令來循環渲染瀑布流的dom：

  
  
    
        
          
               
                 
              
                
                
              
                
                    {{article.title}}

在avalon.scan()以后，實例化masonry，第一版數據就算是出來了，一切都很正常。

但是在后面繼續加載數據的時候，就出問題了。我的設計是，判斷當滾動條拉到最下，就觸發事件用ajax讀取第二、三、四……版的數據。

一開始我想得很簡單：不就是把ajax獲取到的數據直接添加到avalon的vm里，讓它自動完成新數據的渲染就好了，然后再重新實例化masonry。這種方案的問題是，由于“重新實例化masonry”需要的是先把masonry對象destroy()掉，所以就會看到很明顯的閃爍，而且，可以預想到，當數據越來越多的時候，重新實例化的代價就會越來越大，因此這種方案是不可取的。

接著我仔細閱讀了masonry的文檔，發現其原來是有addItems/appended這樣的方法可供調用的，我讀了文檔上的示例代碼（一個小插曲，由于本人的原生js實在是太不濟，就想著用jquery版的，卻發現無論如何都調不通，大概是因為用了requireJS來模塊化的緣故吧，這里暫且不提），發現這個方法的原理就是先往dom樹里添好新的dom節點，然后再將新的dom節點作為參數傳入addItems/appended。這就使我犯難了，我的dom樹是交給avalon來處理的，又不是自己拼的，哪來dom節點可以傳給masonry呀？為了做出一份可以傳給masonry的dom節點，我也是拼了，用jquery來生成一份dom節點再傳給masonry，可是試了一下，無效呀，masonry根本就沒有控制新增dom節點的位置。

這時候我在嘀咕，會不會是avalon還未生成dom節點，masonry就開始“控制”的緣故呢？為了測試這個可能性，我使用了avalon中的data-repeat-rendered指令，這個指令可以指定一個函數，在ms-repeat渲染完后再執行，這樣就可以保證avalon已經生成好dom節點后masonry再介入。測試的結果很令人沮喪，masonry依然沒有控制dom節點的位置，所以應該不是這個問題。

最終，在我的測試下，正確的做法是：把avalon生成的dom節點傳給masonry，怎么實現呢？說起來也很簡單，記錄下拉取新數據前瀑布流已有多少個文塊，也記錄下拉取到多少個文塊，這樣就可以得到新增文塊索引的范圍是從幾到幾了；當avalon渲染完ms-repeat后，用jquery獲取瀑布流所有文塊的dom樹，再根據算出來的新增文塊索引范圍，將新增的dom節點取出來后，傳給masonry，就大功告成了！

云服務器 GPU云服務器視頻會議系統如何與云服務器的結合 webrtc與ffmpeg結合把aspx與cs結合互聯網與傳統產業結合

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

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

瀑布流插件Masonry的配置和使用

摘要：是最流行的瀑布流插件之一，配置簡單，功能強大，在上收獲了。如果你想使用瀑布流提升網站體驗，將是不錯的選擇。瀑布流，又稱瀑布流式布局。需要注意的是，如果你需要加載圖片，不會在圖片加載完后重新布局，這可能會影響你的布局效果，建議配合使用插件。 Masonry是最流行的瀑布流插件之一，配置簡單，功能強大，在Github上收獲了1w+ stars。如果你想使用瀑布流提升網站體驗，Masonry...

waterc 2019-08-22 10:42 評論0 收藏0
瀑布流插件Masonry中文文檔【翻譯】

摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。本位為Masonry官方文檔翻譯，原始鏈接安裝Install 下載下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...

soasme 2019-08-22 15:18 評論0 收藏0
avalon 單頁面程序（種子工程）之一用requirejs引入avalon

摘要：現在微軟終于痛定思痛決定放棄了不支持的安全更新，對我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構建一個單頁面程序介紹以下，是對自己的一個總結，也喜歡對大家有一定的借鑒作用，寫的不好不對的地方希望大家多評論評論謝謝。這篇文章是寫在公司項目結束之后的，因為我個人不太會把沒有實踐過的東西寫出來，實踐是檢驗真理的唯一標準么，用的怎么樣，好不好用，在成熟實踐過的項目上能體...

solocoder 2019-08-19 17:27 評論0 收藏0
avalon2.1.16發布

摘要：也是一個版本，沒有增加任何新特征。不同的是內部源碼已經全部用重新編寫了。之前使用風格的編寫，進行合并。很好的解決這問題。隨著對的大膽嘗試的成功，以后源碼也計劃隨遷移。不過，大家放心，最后出來的框架還是形式，能運行于下。 avalon2.1.16也是一個Fix BUG版本，沒有增加任何新特征。不同的是內部源碼已經全部用es6 modules重新編寫了。之前使用nodejs風格的Commo...

oysun 2019-08-20 11:34 評論0 收藏0
一步步編寫avalon組件03：切換卡組件

摘要：那么組件容器是被誰替換呢當然是組件。我們使用來定義組件時，必須有一個屬性，它是一個模塊，它會轉換為組件。一個組件可以擁有個元素，它們的值不能重復。好了，我們看一下切換卡是如何做的。本章開始介紹slot機制。 slot是WEBComponent引進的東西，叫做插槽。在瀏覽器中，它為一個content元素。不過有資料表明，它會更名為slot。并且在其他語言的模板引擎中，slot標簽更為...

kbyyd24 2019-08-22 10:35 評論0 收藏0