資訊專欄INFORMATION COLUMN
摘要：相關(guān)組件版本最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結(jié)果很令人沮喪，依然沒有控制節(jié)點(diǎn)的位置，所以應(yīng)該不是這個(gè)問題。
相關(guān)組件版本：avalon 1.3.6、masonry 3.1.5
最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發(fā)后臺(tái)的過程中，對(duì)avalon也用得挺熟手的了，所以這次做前臺(tái)也用上。由于avalon是管dom的，masonry也是管dom的，所以實(shí)現(xiàn)兼容的重點(diǎn)就是，讓它們管同一份dom，而不是各管各的。
我的avalon相關(guān)代碼是這樣的：
avalon.define({
$id: "masonry",
article_list: ,
});
其中的article_list便是存放瀑布流數(shù)據(jù)的數(shù)組，用php生成json格式的字符串輸出，賦給article_list作為初值（第一版數(shù)據(jù)）。然后，調(diào)用avalon的ms-repeat指令來循環(huán)渲染瀑布流的dom：
在avalon.scan()以后，實(shí)例化masonry，第一版數(shù)據(jù)就算是出來了，一切都很正常。
但是在后面繼續(xù)加載數(shù)據(jù)的時(shí)候，就出問題了。我的設(shè)計(jì)是，判斷當(dāng)滾動(dòng)條拉到最下，就觸發(fā)事件用ajax讀取第二、三、四……版的數(shù)據(jù)。
一開始我想得很簡單：不就是把a(bǔ)jax獲取到的數(shù)據(jù)直接添加到avalon的vm里，讓它自動(dòng)完成新數(shù)據(jù)的渲染就好了，然后再重新實(shí)例化masonry。這種方案的問題是，由于“重新實(shí)例化masonry”需要的是先把masonry對(duì)象destroy()掉，所以就會(huì)看到很明顯的閃爍，而且，可以預(yù)想到，當(dāng)數(shù)據(jù)越來越多的時(shí)候，重新實(shí)例化的代價(jià)就會(huì)越來越大，因此這種方案是不可取的。
接著我仔細(xì)閱讀了masonry的文檔，發(fā)現(xiàn)其原來是有addItems/appended這樣的方法可供調(diào)用的，我讀了文檔上的示例代碼（一個(gè)小插曲，由于本人的原生js實(shí)在是太不濟(jì)，就想著用jquery版的，卻發(fā)現(xiàn)無論如何都調(diào)不通，大概是因?yàn)橛昧藃equireJS來模塊化的緣故吧，這里暫且不提），發(fā)現(xiàn)這個(gè)方法的原理就是先往dom樹里添好新的dom節(jié)點(diǎn)，然后再將新的dom節(jié)點(diǎn)作為參數(shù)傳入addItems/appended。這就使我犯難了，我的dom樹是交給avalon來處理的，又不是自己拼的，哪來dom節(jié)點(diǎn)可以傳給masonry呀？為了做出一份可以傳給masonry的dom節(jié)點(diǎn)，我也是拼了，用jquery來生成一份dom節(jié)點(diǎn)再傳給masonry，可是試了一下，無效呀，masonry根本就沒有控制新增dom節(jié)點(diǎn)的位置。
這時(shí)候我在嘀咕，會(huì)不會(huì)是avalon還未生成dom節(jié)點(diǎn)，masonry就開始“控制”的緣故呢？為了測試這個(gè)可能性，我使用了avalon中的data-repeat-rendered指令，這個(gè)指令可以指定一個(gè)函數(shù)，在ms-repeat渲染完后再執(zhí)行，這樣就可以保證avalon已經(jīng)生成好dom節(jié)點(diǎn)后masonry再介入。測試的結(jié)果很令人沮喪，masonry依然沒有控制dom節(jié)點(diǎn)的位置，所以應(yīng)該不是這個(gè)問題。
最終，在我的測試下，正確的做法是：把a(bǔ)valon生成的dom節(jié)點(diǎn)傳給masonry，怎么實(shí)現(xiàn)呢？說起來也很簡單，記錄下拉取新數(shù)據(jù)前瀑布流已有多少個(gè)文塊，也記錄下拉取到多少個(gè)文塊，這樣就可以得到新增文塊索引的范圍是從幾到幾了；當(dāng)avalon渲染完ms-repeat后，用jquery獲取瀑布流所有文塊的dom樹，再根據(jù)算出來的新增文塊索引范圍，將新增的dom節(jié)點(diǎn)取出來后，傳給masonry，就大功告成了！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91569.html
摘要：是最流行的瀑布流插件之一，配置簡單，功能強(qiáng)大，在上收獲了。如果你想使用瀑布流提升網(wǎng)站體驗(yàn)，將是不錯(cuò)的選擇。瀑布流，又稱瀑布流式布局。需要注意的是，如果你需要加載圖片，不會(huì)在圖片加載完后重新布局，這可能會(huì)影響你的布局效果，建議配合使用插件。 Masonry是最流行的瀑布流插件之一，配置簡單，功能強(qiáng)大，在Github上收獲了1w+ stars。如果你想使用瀑布流提升網(wǎng)站體驗(yàn)，Masonry...
摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時(shí)會(huì)導(dǎo)致元素的重疊，可以解決這個(gè)問題。布局組件尺寸尺寸配置項(xiàng)和可以可以設(shè)置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。 本位為Masonry官方文檔翻譯，原始鏈接 安裝Install 下載 下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...
摘要：現(xiàn)在微軟終于痛定思痛決定放棄了不支持的安全更新，對(duì)我們前端來說，真的是重大利好啊言歸正傳，這篇文章的目的就是把怎么用構(gòu)建一個(gè)單頁面程序介紹以下，是對(duì)自己的一個(gè)總結(jié)，也喜歡對(duì)大家有一定的借鑒作用，寫的不好不對(duì)的地方希望大家多評(píng)論評(píng)論謝謝。 這篇文章是寫在公司項(xiàng)目結(jié)束之后的，因?yàn)槲覀€(gè)人不太會(huì)把沒有實(shí)踐過的東西寫出來，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)么，用的怎么樣，好不好用，在成熟實(shí)踐過的項(xiàng)目上能體...
摘要：也是一個(gè)版本，沒有增加任何新特征。不同的是內(nèi)部源碼已經(jīng)全部用重新編寫了。之前使用風(fēng)格的編寫，進(jìn)行合并。很好的解決這問題。隨著對(duì)的大膽嘗試的成功，以后源碼也計(jì)劃隨遷移。不過，大家放心，最后出來的框架還是形式，能運(yùn)行于下。 avalon2.1.16也是一個(gè)Fix BUG版本，沒有增加任何新特征。不同的是內(nèi)部源碼已經(jīng)全部用es6 modules重新編寫了。之前使用nodejs風(fēng)格的Commo...
摘要：那么組件容器是被誰替換呢當(dāng)然是組件。我們使用來定義組件時(shí)，必須有一個(gè)屬性，它是一個(gè)模塊，它會(huì)轉(zhuǎn)換為組件。一個(gè)組件可以擁有個(gè)元素，它們的值不能重復(fù)。好了，我們看一下切換卡是如何做的。 本章開始介紹slot機(jī)制。 slot是WEBComponent引進(jìn)的東西，叫做插槽。在瀏覽器中，它為一個(gè)content元素。不過有資料表明，它會(huì)更名為slot。 并且在其他語言的模板引擎中，slot標(biāo)簽更為...
閱讀 1203·2023-04-26 01:35
閱讀 2593·2021-11-02 14:44
閱讀 7810·2021-09-22 15:38
閱讀 2273·2021-09-06 15:11
閱讀 3775·2019-08-30 15:53
閱讀 868·2019-08-29 16:54
閱讀 689·2019-08-26 13:48
閱讀 1827·2019-08-26 13:47
