[{"data":1,"prerenderedAt":2887},["ShallowReactive",2],{"content-/blog/masonry-css-layout":3,"related-blog":2860},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":2854,"_id":2855,"_source":2856,"_file":2857,"_stem":2858,"_extension":2859},"/blog/masonry-css-layout","blog",false,"","CSS 瀑布流布局：Grid 应该演进还是让出舞台？","探讨 CSS 中瀑布流布局的三种实现方案：Grid 扩展、独立 Masonry 模块和 Item Flow 统一系统","CSS Masonry, CSS Grid, 瀑布流布局, 前端开发, CSS 布局, Item Flow","HTMLPAGE","2025-12-02","CSS","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":2823},"root",[18,26,31,38,43,48,55,60,432,437,851,856,902,907,912,946,952,973,978,1122,1127,1132,1165,1170,1247,1252,1257,1280,1286,1299,1304,1309,1391,1420,1541,1546,1589,1594,1637,1643,1655,1660,1688,1693,1821,1826,1831,2016,2050,2055,2132,2137,2186,2192,2197,2312,2317,2327,2348,2358,2371,2380,2393,2398,2403,2469,2474,2479,2727,2733,2738,2756,2766,2775,2812,2817],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","要设计一个 Pinterest 风格的布局，开发者总是很累。不是累于构思设计，而是累于实现。许多开发者希望能用纯 CSS 实现瀑布流效果，不再依赖 JavaScript。但现实是，CSS 仍然没有完美的原生瀑布流解决方案。",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"这个问题已经引起了 CSS 工作组的重视。目前有三种竞争方案：扩展 CSS Grid 支持瀑布流、创建独立的 Masonry 模块，或者采纳 Apple WebKit 提出的统一系统 Item Flow。这三种方案各有利弊，而我们需要理解它们背后的设计理念。",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"当今-css-瀑布流的困境",[36],{"type":24,"value":37},"当今 CSS 瀑布流的困境",{"type":19,"tag":20,"props":39,"children":40},{},[41],{"type":24,"value":42},"瀑布流（Masonry Layout）是一种不规则的流动网格。与规则网格不同，瀑布流中的元素不会在短元素后方留下空隙，而是下一行的元素会上升填补这些空间。这种布局非常适合作品集、图片库和社交媒体信息流——那些需要有机流动的设计。",{"type":19,"tag":20,"props":44,"children":45},{},[46],{"type":24,"value":47},"但遗憾的是，CSS 缺乏原生的瀑布流支持。开发者只能通过以下方式实现：",{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"当前的-javascript-黑科技",[53],{"type":24,"value":54},"当前的 JavaScript 黑科技",{"type":19,"tag":20,"props":56,"children":57},{},[58],{"type":24,"value":59},"最常见的做法是结合 CSS Grid 和 JavaScript，通过计算元素高度来动态设置跨度。代码看起来像这样：",{"type":19,"tag":61,"props":62,"children":66},"pre",{"className":63,"code":64,"language":65,"meta":7,"style":7},"language-css shiki shiki-themes github-dark github-dark",".masonry-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-auto-rows: 10px; /* 小行高用于精细跨度 */\n  grid-auto-flow: column;\n  gap: 10px;\n}\n\n.masonry-item {\n  overflow: hidden;\n}\n\n.masonry-item img {\n  width: 100%;\n  height: auto;\n  display: block;\n}\n","css",[67],{"type":19,"tag":68,"props":69,"children":70},"code",{"__ignoreMap":7},[71,89,114,186,219,241,266,275,285,298,320,328,336,354,381,403,424],{"type":19,"tag":72,"props":73,"children":76},"span",{"class":74,"line":75},"line",1,[77,83],{"type":19,"tag":72,"props":78,"children":80},{"style":79},"--shiki-default:#B392F0;--shiki-dark:#B392F0",[81],{"type":24,"value":82},".masonry-grid",{"type":19,"tag":72,"props":84,"children":86},{"style":85},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[87],{"type":24,"value":88}," {\n",{"type":19,"tag":72,"props":90,"children":92},{"class":74,"line":91},2,[93,99,104,109],{"type":19,"tag":72,"props":94,"children":96},{"style":95},"--shiki-default:#79B8FF;--shiki-dark:#79B8FF",[97],{"type":24,"value":98},"  display",{"type":19,"tag":72,"props":100,"children":101},{"style":85},[102],{"type":24,"value":103},": ",{"type":19,"tag":72,"props":105,"children":106},{"style":95},[107],{"type":24,"value":108},"grid",{"type":19,"tag":72,"props":110,"children":111},{"style":85},[112],{"type":24,"value":113},";\n",{"type":19,"tag":72,"props":115,"children":117},{"class":74,"line":116},3,[118,123,127,132,137,142,147,152,156,161,167,171,176,181],{"type":19,"tag":72,"props":119,"children":120},{"style":95},[121],{"type":24,"value":122},"  grid-template-columns",{"type":19,"tag":72,"props":124,"children":125},{"style":85},[126],{"type":24,"value":103},{"type":19,"tag":72,"props":128,"children":129},{"style":95},[130],{"type":24,"value":131},"repeat",{"type":19,"tag":72,"props":133,"children":134},{"style":85},[135],{"type":24,"value":136},"(",{"type":19,"tag":72,"props":138,"children":139},{"style":95},[140],{"type":24,"value":141},"auto-fill",{"type":19,"tag":72,"props":143,"children":144},{"style":85},[145],{"type":24,"value":146},", ",{"type":19,"tag":72,"props":148,"children":149},{"style":95},[150],{"type":24,"value":151},"minmax",{"type":19,"tag":72,"props":153,"children":154},{"style":85},[155],{"type":24,"value":136},{"type":19,"tag":72,"props":157,"children":158},{"style":95},[159],{"type":24,"value":160},"200",{"type":19,"tag":72,"props":162,"children":164},{"style":163},"--shiki-default:#F97583;--shiki-dark:#F97583",[165],{"type":24,"value":166},"px",{"type":19,"tag":72,"props":168,"children":169},{"style":85},[170],{"type":24,"value":146},{"type":19,"tag":72,"props":172,"children":173},{"style":95},[174],{"type":24,"value":175},"1",{"type":19,"tag":72,"props":177,"children":178},{"style":163},[179],{"type":24,"value":180},"fr",{"type":19,"tag":72,"props":182,"children":183},{"style":85},[184],{"type":24,"value":185},"));\n",{"type":19,"tag":72,"props":187,"children":189},{"class":74,"line":188},4,[190,195,199,204,208,213],{"type":19,"tag":72,"props":191,"children":192},{"style":95},[193],{"type":24,"value":194},"  grid-auto-rows",{"type":19,"tag":72,"props":196,"children":197},{"style":85},[198],{"type":24,"value":103},{"type":19,"tag":72,"props":200,"children":201},{"style":95},[202],{"type":24,"value":203},"10",{"type":19,"tag":72,"props":205,"children":206},{"style":163},[207],{"type":24,"value":166},{"type":19,"tag":72,"props":209,"children":210},{"style":85},[211],{"type":24,"value":212},"; ",{"type":19,"tag":72,"props":214,"children":216},{"style":215},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[217],{"type":24,"value":218},"/* 小行高用于精细跨度 */\n",{"type":19,"tag":72,"props":220,"children":222},{"class":74,"line":221},5,[223,228,232,237],{"type":19,"tag":72,"props":224,"children":225},{"style":95},[226],{"type":24,"value":227},"  grid-auto-flow",{"type":19,"tag":72,"props":229,"children":230},{"style":85},[231],{"type":24,"value":103},{"type":19,"tag":72,"props":233,"children":234},{"style":95},[235],{"type":24,"value":236},"column",{"type":19,"tag":72,"props":238,"children":239},{"style":85},[240],{"type":24,"value":113},{"type":19,"tag":72,"props":242,"children":244},{"class":74,"line":243},6,[245,250,254,258,262],{"type":19,"tag":72,"props":246,"children":247},{"style":95},[248],{"type":24,"value":249},"  gap",{"type":19,"tag":72,"props":251,"children":252},{"style":85},[253],{"type":24,"value":103},{"type":19,"tag":72,"props":255,"children":256},{"style":95},[257],{"type":24,"value":203},{"type":19,"tag":72,"props":259,"children":260},{"style":163},[261],{"type":24,"value":166},{"type":19,"tag":72,"props":263,"children":264},{"style":85},[265],{"type":24,"value":113},{"type":19,"tag":72,"props":267,"children":269},{"class":74,"line":268},7,[270],{"type":19,"tag":72,"props":271,"children":272},{"style":85},[273],{"type":24,"value":274},"}\n",{"type":19,"tag":72,"props":276,"children":278},{"class":74,"line":277},8,[279],{"type":19,"tag":72,"props":280,"children":282},{"emptyLinePlaceholder":281},true,[283],{"type":24,"value":284},"\n",{"type":19,"tag":72,"props":286,"children":288},{"class":74,"line":287},9,[289,294],{"type":19,"tag":72,"props":290,"children":291},{"style":79},[292],{"type":24,"value":293},".masonry-item",{"type":19,"tag":72,"props":295,"children":296},{"style":85},[297],{"type":24,"value":88},{"type":19,"tag":72,"props":299,"children":301},{"class":74,"line":300},10,[302,307,311,316],{"type":19,"tag":72,"props":303,"children":304},{"style":95},[305],{"type":24,"value":306},"  overflow",{"type":19,"tag":72,"props":308,"children":309},{"style":85},[310],{"type":24,"value":103},{"type":19,"tag":72,"props":312,"children":313},{"style":95},[314],{"type":24,"value":315},"hidden",{"type":19,"tag":72,"props":317,"children":318},{"style":85},[319],{"type":24,"value":113},{"type":19,"tag":72,"props":321,"children":323},{"class":74,"line":322},11,[324],{"type":19,"tag":72,"props":325,"children":326},{"style":85},[327],{"type":24,"value":274},{"type":19,"tag":72,"props":329,"children":331},{"class":74,"line":330},12,[332],{"type":19,"tag":72,"props":333,"children":334},{"emptyLinePlaceholder":281},[335],{"type":24,"value":284},{"type":19,"tag":72,"props":337,"children":339},{"class":74,"line":338},13,[340,344,350],{"type":19,"tag":72,"props":341,"children":342},{"style":79},[343],{"type":24,"value":293},{"type":19,"tag":72,"props":345,"children":347},{"style":346},"--shiki-default:#85E89D;--shiki-dark:#85E89D",[348],{"type":24,"value":349}," img",{"type":19,"tag":72,"props":351,"children":352},{"style":85},[353],{"type":24,"value":88},{"type":19,"tag":72,"props":355,"children":357},{"class":74,"line":356},14,[358,363,367,372,377],{"type":19,"tag":72,"props":359,"children":360},{"style":95},[361],{"type":24,"value":362},"  width",{"type":19,"tag":72,"props":364,"children":365},{"style":85},[366],{"type":24,"value":103},{"type":19,"tag":72,"props":368,"children":369},{"style":95},[370],{"type":24,"value":371},"100",{"type":19,"tag":72,"props":373,"children":374},{"style":163},[375],{"type":24,"value":376},"%",{"type":19,"tag":72,"props":378,"children":379},{"style":85},[380],{"type":24,"value":113},{"type":19,"tag":72,"props":382,"children":384},{"class":74,"line":383},15,[385,390,394,399],{"type":19,"tag":72,"props":386,"children":387},{"style":95},[388],{"type":24,"value":389},"  height",{"type":19,"tag":72,"props":391,"children":392},{"style":85},[393],{"type":24,"value":103},{"type":19,"tag":72,"props":395,"children":396},{"style":95},[397],{"type":24,"value":398},"auto",{"type":19,"tag":72,"props":400,"children":401},{"style":85},[402],{"type":24,"value":113},{"type":19,"tag":72,"props":404,"children":406},{"class":74,"line":405},16,[407,411,415,420],{"type":19,"tag":72,"props":408,"children":409},{"style":95},[410],{"type":24,"value":98},{"type":19,"tag":72,"props":412,"children":413},{"style":85},[414],{"type":24,"value":103},{"type":19,"tag":72,"props":416,"children":417},{"style":95},[418],{"type":24,"value":419},"block",{"type":19,"tag":72,"props":421,"children":422},{"style":85},[423],{"type":24,"value":113},{"type":19,"tag":72,"props":425,"children":427},{"class":74,"line":426},17,[428],{"type":19,"tag":72,"props":429,"children":430},{"style":85},[431],{"type":24,"value":274},{"type":19,"tag":20,"props":433,"children":434},{},[435],{"type":24,"value":436},"然后使用 JavaScript 计算每个元素应该跨越的行数：",{"type":19,"tag":61,"props":438,"children":442},{"className":439,"code":440,"language":441,"meta":7,"style":7},"language-javascript shiki shiki-themes github-dark github-dark","function applyMasonry() {\n  const grid = document.querySelector('.masonry-grid');\n  const items = grid.querySelectorAll('.masonry-item');\n\n  items.forEach(item => {\n    item.style.gridRowEnd = 'auto';\n    const rowHeight = 10;\n    const gap = 10;\n    const itemHeight = item.getBoundingClientRect().height;\n    const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));\n    item.style.gridRowEnd = `span ${rowSpan}`;\n  });\n}\n\nwindow.addEventListener('load', applyMasonry);\nwindow.addEventListener('resize', applyMasonry);\n","javascript",[443],{"type":19,"tag":68,"props":444,"children":445},{"__ignoreMap":7},[446,464,507,546,553,585,607,633,657,688,748,778,786,793,800,827],{"type":19,"tag":72,"props":447,"children":448},{"class":74,"line":75},[449,454,459],{"type":19,"tag":72,"props":450,"children":451},{"style":163},[452],{"type":24,"value":453},"function",{"type":19,"tag":72,"props":455,"children":456},{"style":79},[457],{"type":24,"value":458}," applyMasonry",{"type":19,"tag":72,"props":460,"children":461},{"style":85},[462],{"type":24,"value":463},"() {\n",{"type":19,"tag":72,"props":465,"children":466},{"class":74,"line":91},[467,472,477,482,487,492,496,502],{"type":19,"tag":72,"props":468,"children":469},{"style":163},[470],{"type":24,"value":471},"  const",{"type":19,"tag":72,"props":473,"children":474},{"style":95},[475],{"type":24,"value":476}," grid",{"type":19,"tag":72,"props":478,"children":479},{"style":163},[480],{"type":24,"value":481}," =",{"type":19,"tag":72,"props":483,"children":484},{"style":85},[485],{"type":24,"value":486}," document.",{"type":19,"tag":72,"props":488,"children":489},{"style":79},[490],{"type":24,"value":491},"querySelector",{"type":19,"tag":72,"props":493,"children":494},{"style":85},[495],{"type":24,"value":136},{"type":19,"tag":72,"props":497,"children":499},{"style":498},"--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF",[500],{"type":24,"value":501},"'.masonry-grid'",{"type":19,"tag":72,"props":503,"children":504},{"style":85},[505],{"type":24,"value":506},");\n",{"type":19,"tag":72,"props":508,"children":509},{"class":74,"line":116},[510,514,519,523,528,533,537,542],{"type":19,"tag":72,"props":511,"children":512},{"style":163},[513],{"type":24,"value":471},{"type":19,"tag":72,"props":515,"children":516},{"style":95},[517],{"type":24,"value":518}," items",{"type":19,"tag":72,"props":520,"children":521},{"style":163},[522],{"type":24,"value":481},{"type":19,"tag":72,"props":524,"children":525},{"style":85},[526],{"type":24,"value":527}," grid.",{"type":19,"tag":72,"props":529,"children":530},{"style":79},[531],{"type":24,"value":532},"querySelectorAll",{"type":19,"tag":72,"props":534,"children":535},{"style":85},[536],{"type":24,"value":136},{"type":19,"tag":72,"props":538,"children":539},{"style":498},[540],{"type":24,"value":541},"'.masonry-item'",{"type":19,"tag":72,"props":543,"children":544},{"style":85},[545],{"type":24,"value":506},{"type":19,"tag":72,"props":547,"children":548},{"class":74,"line":188},[549],{"type":19,"tag":72,"props":550,"children":551},{"emptyLinePlaceholder":281},[552],{"type":24,"value":284},{"type":19,"tag":72,"props":554,"children":555},{"class":74,"line":221},[556,561,566,570,576,581],{"type":19,"tag":72,"props":557,"children":558},{"style":85},[559],{"type":24,"value":560},"  items.",{"type":19,"tag":72,"props":562,"children":563},{"style":79},[564],{"type":24,"value":565},"forEach",{"type":19,"tag":72,"props":567,"children":568},{"style":85},[569],{"type":24,"value":136},{"type":19,"tag":72,"props":571,"children":573},{"style":572},"--shiki-default:#FFAB70;--shiki-dark:#FFAB70",[574],{"type":24,"value":575},"item",{"type":19,"tag":72,"props":577,"children":578},{"style":163},[579],{"type":24,"value":580}," =>",{"type":19,"tag":72,"props":582,"children":583},{"style":85},[584],{"type":24,"value":88},{"type":19,"tag":72,"props":586,"children":587},{"class":74,"line":243},[588,593,598,603],{"type":19,"tag":72,"props":589,"children":590},{"style":85},[591],{"type":24,"value":592},"    item.style.gridRowEnd ",{"type":19,"tag":72,"props":594,"children":595},{"style":163},[596],{"type":24,"value":597},"=",{"type":19,"tag":72,"props":599,"children":600},{"style":498},[601],{"type":24,"value":602}," 'auto'",{"type":19,"tag":72,"props":604,"children":605},{"style":85},[606],{"type":24,"value":113},{"type":19,"tag":72,"props":608,"children":609},{"class":74,"line":268},[610,615,620,624,629],{"type":19,"tag":72,"props":611,"children":612},{"style":163},[613],{"type":24,"value":614},"    const",{"type":19,"tag":72,"props":616,"children":617},{"style":95},[618],{"type":24,"value":619}," rowHeight",{"type":19,"tag":72,"props":621,"children":622},{"style":163},[623],{"type":24,"value":481},{"type":19,"tag":72,"props":625,"children":626},{"style":95},[627],{"type":24,"value":628}," 10",{"type":19,"tag":72,"props":630,"children":631},{"style":85},[632],{"type":24,"value":113},{"type":19,"tag":72,"props":634,"children":635},{"class":74,"line":277},[636,640,645,649,653],{"type":19,"tag":72,"props":637,"children":638},{"style":163},[639],{"type":24,"value":614},{"type":19,"tag":72,"props":641,"children":642},{"style":95},[643],{"type":24,"value":644}," gap",{"type":19,"tag":72,"props":646,"children":647},{"style":163},[648],{"type":24,"value":481},{"type":19,"tag":72,"props":650,"children":651},{"style":95},[652],{"type":24,"value":628},{"type":19,"tag":72,"props":654,"children":655},{"style":85},[656],{"type":24,"value":113},{"type":19,"tag":72,"props":658,"children":659},{"class":74,"line":287},[660,664,669,673,678,683],{"type":19,"tag":72,"props":661,"children":662},{"style":163},[663],{"type":24,"value":614},{"type":19,"tag":72,"props":665,"children":666},{"style":95},[667],{"type":24,"value":668}," itemHeight",{"type":19,"tag":72,"props":670,"children":671},{"style":163},[672],{"type":24,"value":481},{"type":19,"tag":72,"props":674,"children":675},{"style":85},[676],{"type":24,"value":677}," item.",{"type":19,"tag":72,"props":679,"children":680},{"style":79},[681],{"type":24,"value":682},"getBoundingClientRect",{"type":19,"tag":72,"props":684,"children":685},{"style":85},[686],{"type":24,"value":687},"().height;\n",{"type":19,"tag":72,"props":689,"children":690},{"class":74,"line":300},[691,695,700,704,709,714,719,724,729,734,739,743],{"type":19,"tag":72,"props":692,"children":693},{"style":163},[694],{"type":24,"value":614},{"type":19,"tag":72,"props":696,"children":697},{"style":95},[698],{"type":24,"value":699}," rowSpan",{"type":19,"tag":72,"props":701,"children":702},{"style":163},[703],{"type":24,"value":481},{"type":19,"tag":72,"props":705,"children":706},{"style":85},[707],{"type":24,"value":708}," Math.",{"type":19,"tag":72,"props":710,"children":711},{"style":79},[712],{"type":24,"value":713},"ceil",{"type":19,"tag":72,"props":715,"children":716},{"style":85},[717],{"type":24,"value":718},"((itemHeight ",{"type":19,"tag":72,"props":720,"children":721},{"style":163},[722],{"type":24,"value":723},"+",{"type":19,"tag":72,"props":725,"children":726},{"style":85},[727],{"type":24,"value":728}," gap) ",{"type":19,"tag":72,"props":730,"children":731},{"style":163},[732],{"type":24,"value":733},"/",{"type":19,"tag":72,"props":735,"children":736},{"style":85},[737],{"type":24,"value":738}," (rowHeight ",{"type":19,"tag":72,"props":740,"children":741},{"style":163},[742],{"type":24,"value":723},{"type":19,"tag":72,"props":744,"children":745},{"style":85},[746],{"type":24,"value":747}," gap));\n",{"type":19,"tag":72,"props":749,"children":750},{"class":74,"line":322},[751,755,759,764,769,774],{"type":19,"tag":72,"props":752,"children":753},{"style":85},[754],{"type":24,"value":592},{"type":19,"tag":72,"props":756,"children":757},{"style":163},[758],{"type":24,"value":597},{"type":19,"tag":72,"props":760,"children":761},{"style":498},[762],{"type":24,"value":763}," `span ${",{"type":19,"tag":72,"props":765,"children":766},{"style":85},[767],{"type":24,"value":768},"rowSpan",{"type":19,"tag":72,"props":770,"children":771},{"style":498},[772],{"type":24,"value":773},"}`",{"type":19,"tag":72,"props":775,"children":776},{"style":85},[777],{"type":24,"value":113},{"type":19,"tag":72,"props":779,"children":780},{"class":74,"line":330},[781],{"type":19,"tag":72,"props":782,"children":783},{"style":85},[784],{"type":24,"value":785},"  });\n",{"type":19,"tag":72,"props":787,"children":788},{"class":74,"line":338},[789],{"type":19,"tag":72,"props":790,"children":791},{"style":85},[792],{"type":24,"value":274},{"type":19,"tag":72,"props":794,"children":795},{"class":74,"line":356},[796],{"type":19,"tag":72,"props":797,"children":798},{"emptyLinePlaceholder":281},[799],{"type":24,"value":284},{"type":19,"tag":72,"props":801,"children":802},{"class":74,"line":383},[803,808,813,817,822],{"type":19,"tag":72,"props":804,"children":805},{"style":85},[806],{"type":24,"value":807},"window.",{"type":19,"tag":72,"props":809,"children":810},{"style":79},[811],{"type":24,"value":812},"addEventListener",{"type":19,"tag":72,"props":814,"children":815},{"style":85},[816],{"type":24,"value":136},{"type":19,"tag":72,"props":818,"children":819},{"style":498},[820],{"type":24,"value":821},"'load'",{"type":19,"tag":72,"props":823,"children":824},{"style":85},[825],{"type":24,"value":826},", applyMasonry);\n",{"type":19,"tag":72,"props":828,"children":829},{"class":74,"line":405},[830,834,838,842,847],{"type":19,"tag":72,"props":831,"children":832},{"style":85},[833],{"type":24,"value":807},{"type":19,"tag":72,"props":835,"children":836},{"style":79},[837],{"type":24,"value":812},{"type":19,"tag":72,"props":839,"children":840},{"style":85},[841],{"type":24,"value":136},{"type":19,"tag":72,"props":843,"children":844},{"style":498},[845],{"type":24,"value":846},"'resize'",{"type":19,"tag":72,"props":848,"children":849},{"style":85},[850],{"type":24,"value":826},{"type":19,"tag":20,"props":852,"children":853},{},[854],{"type":24,"value":855},"看起来可以工作，但问题很明显：",{"type":19,"tag":857,"props":858,"children":859},"ol",{},[860,872,882,892],{"type":19,"tag":861,"props":862,"children":863},"li",{},[864,870],{"type":19,"tag":865,"props":866,"children":867},"strong",{},[868],{"type":24,"value":869},"需要 JavaScript",{"type":24,"value":871},"：这完全违背了\"用 CSS 解决问题\"的初心",{"type":19,"tag":861,"props":873,"children":874},{},[875,880],{"type":19,"tag":865,"props":876,"children":877},{},[878],{"type":24,"value":879},"性能问题",{"type":24,"value":881},"：在复杂页面上，resize 事件触发的重新计算会导致卡顿",{"type":19,"tag":861,"props":883,"children":884},{},[885,890],{"type":19,"tag":865,"props":886,"children":887},{},[888],{"type":24,"value":889},"DOM 顺序混乱",{"type":24,"value":891},"：视觉流和逻辑 DOM 顺序可能不一致，影响无障碍访问",{"type":19,"tag":861,"props":893,"children":894},{},[895,900],{"type":19,"tag":865,"props":896,"children":897},{},[898],{"type":24,"value":899},"内容加载问题",{"type":24,"value":901},"：当图片延迟加载或内容动态变化时，计算的跨度需要重新调整，容易造成布局抖动",{"type":19,"tag":49,"props":903,"children":905},{"id":904},"其他方案的局限性",[906],{"type":24,"value":904},{"type":19,"tag":20,"props":908,"children":909},{},[910],{"type":24,"value":911},"除了 Grid 黑科技外，开发者还会尝试：",{"type":19,"tag":913,"props":914,"children":915},"ul",{},[916,926,936],{"type":19,"tag":861,"props":917,"children":918},{},[919,924],{"type":19,"tag":865,"props":920,"children":921},{},[922],{"type":24,"value":923},"CSS Columns",{"type":24,"value":925},"：虽然能创建多列效果，但无法精细控制元素流向",{"type":19,"tag":861,"props":927,"children":928},{},[929,934],{"type":19,"tag":865,"props":930,"children":931},{},[932],{"type":24,"value":933},"Flexbox",{"type":24,"value":935},"：本质上是一维布局，不适合二维瀑布流",{"type":19,"tag":861,"props":937,"children":938},{},[939,944],{"type":19,"tag":865,"props":940,"children":941},{},[942],{"type":24,"value":943},"第三方库",{"type":24,"value":945},"（如 Masonry.js）：引入额外的依赖和体积",{"type":19,"tag":32,"props":947,"children":949},{"id":948},"方案一扩展-css-grid-支持瀑布流",[950],{"type":24,"value":951},"方案一：扩展 CSS Grid 支持瀑布流",{"type":19,"tag":20,"props":953,"children":954},{},[955,957,963,965,971],{"type":24,"value":956},"CSS Grid Level 3 中有一个实验性提案：给 ",{"type":19,"tag":68,"props":958,"children":960},{"className":959},[],[961],{"type":24,"value":962},"grid-template-rows",{"type":24,"value":964}," 添加 ",{"type":19,"tag":68,"props":966,"children":968},{"className":967},[],[969],{"type":24,"value":970},"masonry",{"type":24,"value":972}," 值。目前只在 Firefox Nightly 中可用（需要启用标志）。",{"type":19,"tag":49,"props":974,"children":976},{"id":975},"工作原理",[977],{"type":24,"value":975},{"type":19,"tag":61,"props":979,"children":981},{"className":63,"code":980,"language":65,"meta":7,"style":7},".masonry-grid {\n  display: grid;\n  gap: 10px;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-template-rows: masonry; /* 关键：启用瀑布流模式 */\n}\n",[982],{"type":19,"tag":68,"props":983,"children":984},{"__ignoreMap":7},[985,996,1015,1038,1097,1115],{"type":19,"tag":72,"props":986,"children":987},{"class":74,"line":75},[988,992],{"type":19,"tag":72,"props":989,"children":990},{"style":79},[991],{"type":24,"value":82},{"type":19,"tag":72,"props":993,"children":994},{"style":85},[995],{"type":24,"value":88},{"type":19,"tag":72,"props":997,"children":998},{"class":74,"line":91},[999,1003,1007,1011],{"type":19,"tag":72,"props":1000,"children":1001},{"style":95},[1002],{"type":24,"value":98},{"type":19,"tag":72,"props":1004,"children":1005},{"style":85},[1006],{"type":24,"value":103},{"type":19,"tag":72,"props":1008,"children":1009},{"style":95},[1010],{"type":24,"value":108},{"type":19,"tag":72,"props":1012,"children":1013},{"style":85},[1014],{"type":24,"value":113},{"type":19,"tag":72,"props":1016,"children":1017},{"class":74,"line":116},[1018,1022,1026,1030,1034],{"type":19,"tag":72,"props":1019,"children":1020},{"style":95},[1021],{"type":24,"value":249},{"type":19,"tag":72,"props":1023,"children":1024},{"style":85},[1025],{"type":24,"value":103},{"type":19,"tag":72,"props":1027,"children":1028},{"style":95},[1029],{"type":24,"value":203},{"type":19,"tag":72,"props":1031,"children":1032},{"style":163},[1033],{"type":24,"value":166},{"type":19,"tag":72,"props":1035,"children":1036},{"style":85},[1037],{"type":24,"value":113},{"type":19,"tag":72,"props":1039,"children":1040},{"class":74,"line":188},[1041,1045,1049,1053,1057,1061,1065,1069,1073,1077,1081,1085,1089,1093],{"type":19,"tag":72,"props":1042,"children":1043},{"style":95},[1044],{"type":24,"value":122},{"type":19,"tag":72,"props":1046,"children":1047},{"style":85},[1048],{"type":24,"value":103},{"type":19,"tag":72,"props":1050,"children":1051},{"style":95},[1052],{"type":24,"value":131},{"type":19,"tag":72,"props":1054,"children":1055},{"style":85},[1056],{"type":24,"value":136},{"type":19,"tag":72,"props":1058,"children":1059},{"style":95},[1060],{"type":24,"value":141},{"type":19,"tag":72,"props":1062,"children":1063},{"style":85},[1064],{"type":24,"value":146},{"type":19,"tag":72,"props":1066,"children":1067},{"style":95},[1068],{"type":24,"value":151},{"type":19,"tag":72,"props":1070,"children":1071},{"style":85},[1072],{"type":24,"value":136},{"type":19,"tag":72,"props":1074,"children":1075},{"style":95},[1076],{"type":24,"value":160},{"type":19,"tag":72,"props":1078,"children":1079},{"style":163},[1080],{"type":24,"value":166},{"type":19,"tag":72,"props":1082,"children":1083},{"style":85},[1084],{"type":24,"value":146},{"type":19,"tag":72,"props":1086,"children":1087},{"style":95},[1088],{"type":24,"value":175},{"type":19,"tag":72,"props":1090,"children":1091},{"style":163},[1092],{"type":24,"value":180},{"type":19,"tag":72,"props":1094,"children":1095},{"style":85},[1096],{"type":24,"value":185},{"type":19,"tag":72,"props":1098,"children":1099},{"class":74,"line":221},[1100,1105,1110],{"type":19,"tag":72,"props":1101,"children":1102},{"style":95},[1103],{"type":24,"value":1104},"  grid-template-rows",{"type":19,"tag":72,"props":1106,"children":1107},{"style":85},[1108],{"type":24,"value":1109},": masonry; ",{"type":19,"tag":72,"props":1111,"children":1112},{"style":215},[1113],{"type":24,"value":1114},"/* 关键：启用瀑布流模式 */\n",{"type":19,"tag":72,"props":1116,"children":1117},{"class":74,"line":243},[1118],{"type":19,"tag":72,"props":1119,"children":1120},{"style":85},[1121],{"type":24,"value":274},{"type":19,"tag":20,"props":1123,"children":1124},{},[1125],{"type":24,"value":1126},"这样做的话，网格的列仍然保持为网格轴，而行则采用瀑布流模式。元素会沿着行逐个排列，尊重列的限制但不受行限制。",{"type":19,"tag":49,"props":1128,"children":1130},{"id":1129},"优势",[1131],{"type":24,"value":1129},{"type":19,"tag":913,"props":1133,"children":1134},{},[1135,1145,1155],{"type":19,"tag":861,"props":1136,"children":1137},{},[1138,1143],{"type":19,"tag":865,"props":1139,"children":1140},{},[1141],{"type":24,"value":1142},"熟悉的语法",{"type":24,"value":1144},"：建立在 Grid 已有的知识基础之上，学习曲线不陡",{"type":19,"tag":861,"props":1146,"children":1147},{},[1148,1153],{"type":19,"tag":865,"props":1149,"children":1150},{},[1151],{"type":24,"value":1152},"工具支持",{"type":24,"value":1154},"：Chrome DevTools 和 Firefox Inspector 都能很好地支持 Grid，无需 JavaScript hack",{"type":19,"tag":861,"props":1156,"children":1157},{},[1158,1163],{"type":19,"tag":865,"props":1159,"children":1160},{},[1161],{"type":24,"value":1162},"一致的心理模型",{"type":24,"value":1164},"：开发者不需要学习全新的布局系统",{"type":19,"tag":49,"props":1166,"children":1168},{"id":1167},"劣势",[1169],{"type":24,"value":1167},{"type":19,"tag":913,"props":1171,"children":1172},{},[1173,1199,1227,1237],{"type":19,"tag":861,"props":1174,"children":1175},{},[1176,1181,1183,1189,1191,1197],{"type":19,"tag":865,"props":1177,"children":1178},{},[1179],{"type":24,"value":1180},"复杂性增加",{"type":24,"value":1182},"：Grid 的规范已经很庞大，加入 masonry 会让它变成一个\"迷宫\"。属性如 ",{"type":19,"tag":68,"props":1184,"children":1186},{"className":1185},[],[1187],{"type":24,"value":1188},"align-content",{"type":24,"value":1190},"、",{"type":19,"tag":68,"props":1192,"children":1194},{"className":1193},[],[1195],{"type":24,"value":1196},"grid-auto-flow",{"type":24,"value":1198}," 与 masonry 的交互还不明确",{"type":19,"tag":861,"props":1200,"children":1201},{},[1202,1207,1209],{"type":19,"tag":865,"props":1203,"children":1204},{},[1205],{"type":24,"value":1206},"边界情况模糊",{"type":24,"value":1208},"：\n",{"type":19,"tag":913,"props":1210,"children":1211},{},[1212,1217,1222],{"type":19,"tag":861,"props":1213,"children":1214},{},[1215],{"type":24,"value":1216},"元素跨越多列且要用瀑布流，会怎样？",{"type":19,"tag":861,"props":1218,"children":1219},{},[1220],{"type":24,"value":1221},"不同列之间的间距不对齐，怎么办？",{"type":19,"tag":861,"props":1223,"children":1224},{},[1225],{"type":24,"value":1226},"这些规范定义仍然不清楚",{"type":19,"tag":861,"props":1228,"children":1229},{},[1230,1235],{"type":19,"tag":865,"props":1231,"children":1232},{},[1233],{"type":24,"value":1234},"浏览器兼容性差",{"type":24,"value":1236},"：目前只有 Firefox Nightly 支持，即使有 polyfill 也无法在其他浏览器工作。这不是你想在客户项目中尝试的东西",{"type":19,"tag":861,"props":1238,"children":1239},{},[1240,1245],{"type":19,"tag":865,"props":1241,"children":1242},{},[1243],{"type":24,"value":1244},"实现 bug",{"type":24,"value":1246},"：早期测试显示，当内容动态加载时，元素会出现不可预测的跳跃，特别是在响应式设计中",{"type":19,"tag":49,"props":1248,"children":1250},{"id":1249},"开发者的批评",[1251],{"type":24,"value":1249},{"type":19,"tag":20,"props":1253,"children":1254},{},[1255],{"type":24,"value":1256},"设计背景深厚的开发者对这个方案有意见：",{"type":19,"tag":913,"props":1258,"children":1259},{},[1260,1270],{"type":19,"tag":861,"props":1261,"children":1262},{},[1263,1268],{"type":19,"tag":865,"props":1264,"children":1265},{},[1266],{"type":24,"value":1267},"Rachel Andrew",{"type":24,"value":1269}," 指出：瀑布流的有机流动与 Grid 的严格二维结构相悖，可能会迷惑期望 Grid 表现的开发者",{"type":19,"tag":861,"props":1271,"children":1272},{},[1273,1278],{"type":19,"tag":865,"props":1274,"children":1275},{},[1276],{"type":24,"value":1277},"Ahmad Shadeed",{"type":24,"value":1279}," 认为：这让 Grid 变得不必要地复杂，把两个完全不同的格式化上下文混在一起，这对教学和学习都是噩梦",{"type":19,"tag":32,"props":1281,"children":1283},{"id":1282},"方案二独立的-masonry-模块",[1284],{"type":24,"value":1285},"方案二：独立的 Masonry 模块",{"type":19,"tag":20,"props":1287,"children":1288},{},[1289,1291,1297],{"type":24,"value":1290},"另一个思路是创建一个全新的独立布局系统：",{"type":19,"tag":68,"props":1292,"children":1294},{"className":1293},[],[1295],{"type":24,"value":1296},"display: masonry",{"type":24,"value":1298},"。这不是 Grid 的扩展，而是一个完全独立的模块。",{"type":19,"tag":49,"props":1300,"children":1302},{"id":1301},"工作原理-1",[1303],{"type":24,"value":975},{"type":19,"tag":20,"props":1305,"children":1306},{},[1307],{"type":24,"value":1308},"想象一个不依赖 Grid 的严格轨道或 Flexbox 的线性流动，而是专为垂直堆叠和水平调整设计的系统。目标是一个干净的新系统：",{"type":19,"tag":61,"props":1310,"children":1312},{"className":63,"code":1311,"language":65,"meta":7,"style":7},".masonry {\n  display: masonry;\n  masonry-direction: column;\n  gap: 1rem;\n}\n",[1313],{"type":19,"tag":68,"props":1314,"children":1315},{"__ignoreMap":7},[1316,1328,1340,1360,1384],{"type":19,"tag":72,"props":1317,"children":1318},{"class":74,"line":75},[1319,1324],{"type":19,"tag":72,"props":1320,"children":1321},{"style":79},[1322],{"type":24,"value":1323},".masonry",{"type":19,"tag":72,"props":1325,"children":1326},{"style":85},[1327],{"type":24,"value":88},{"type":19,"tag":72,"props":1329,"children":1330},{"class":74,"line":91},[1331,1335],{"type":19,"tag":72,"props":1332,"children":1333},{"style":95},[1334],{"type":24,"value":98},{"type":19,"tag":72,"props":1336,"children":1337},{"style":85},[1338],{"type":24,"value":1339},": masonry;\n",{"type":19,"tag":72,"props":1341,"children":1342},{"class":74,"line":116},[1343,1348,1352,1356],{"type":19,"tag":72,"props":1344,"children":1345},{"style":95},[1346],{"type":24,"value":1347},"  masonry-direction",{"type":19,"tag":72,"props":1349,"children":1350},{"style":85},[1351],{"type":24,"value":103},{"type":19,"tag":72,"props":1353,"children":1354},{"style":95},[1355],{"type":24,"value":236},{"type":19,"tag":72,"props":1357,"children":1358},{"style":85},[1359],{"type":24,"value":113},{"type":19,"tag":72,"props":1361,"children":1362},{"class":74,"line":188},[1363,1367,1371,1375,1380],{"type":19,"tag":72,"props":1364,"children":1365},{"style":95},[1366],{"type":24,"value":249},{"type":19,"tag":72,"props":1368,"children":1369},{"style":85},[1370],{"type":24,"value":103},{"type":19,"tag":72,"props":1372,"children":1373},{"style":95},[1374],{"type":24,"value":175},{"type":19,"tag":72,"props":1376,"children":1377},{"style":163},[1378],{"type":24,"value":1379},"rem",{"type":19,"tag":72,"props":1381,"children":1382},{"style":85},[1383],{"type":24,"value":113},{"type":19,"tag":72,"props":1385,"children":1386},{"class":74,"line":221},[1387],{"type":19,"tag":72,"props":1388,"children":1389},{"style":85},[1390],{"type":24,"value":274},{"type":19,"tag":20,"props":1392,"children":1393},{},[1394,1396,1402,1404,1410,1412,1418],{"type":24,"value":1395},"需要更多控制？假设的属性如 ",{"type":19,"tag":68,"props":1397,"children":1399},{"className":1398},[],[1400],{"type":24,"value":1401},"masonry-columns: auto",{"type":24,"value":1403}," 可以模仿 Grid 的 ",{"type":19,"tag":68,"props":1405,"children":1407},{"className":1406},[],[1408],{"type":24,"value":1409},"repeat(auto-fill, minmax())",{"type":24,"value":1411},"，而 ",{"type":19,"tag":68,"props":1413,"children":1415},{"className":1414},[],[1416],{"type":24,"value":1417},"masonry-align: balance",{"type":24,"value":1419}," 可能会平衡列长度以获得更精致的外观：",{"type":19,"tag":61,"props":1421,"children":1423},{"className":63,"code":1422,"language":65,"meta":7,"style":7},".gallery {\n  display: masonry;\n  masonry-columns: auto;\n  masonry-direction: column;\n  masonry-align: balance;\n  gap: 1.5rem;\n}\n",[1424],{"type":19,"tag":68,"props":1425,"children":1426},{"__ignoreMap":7},[1427,1439,1450,1470,1489,1510,1534],{"type":19,"tag":72,"props":1428,"children":1429},{"class":74,"line":75},[1430,1435],{"type":19,"tag":72,"props":1431,"children":1432},{"style":79},[1433],{"type":24,"value":1434},".gallery",{"type":19,"tag":72,"props":1436,"children":1437},{"style":85},[1438],{"type":24,"value":88},{"type":19,"tag":72,"props":1440,"children":1441},{"class":74,"line":91},[1442,1446],{"type":19,"tag":72,"props":1443,"children":1444},{"style":95},[1445],{"type":24,"value":98},{"type":19,"tag":72,"props":1447,"children":1448},{"style":85},[1449],{"type":24,"value":1339},{"type":19,"tag":72,"props":1451,"children":1452},{"class":74,"line":116},[1453,1458,1462,1466],{"type":19,"tag":72,"props":1454,"children":1455},{"style":95},[1456],{"type":24,"value":1457},"  masonry-columns",{"type":19,"tag":72,"props":1459,"children":1460},{"style":85},[1461],{"type":24,"value":103},{"type":19,"tag":72,"props":1463,"children":1464},{"style":95},[1465],{"type":24,"value":398},{"type":19,"tag":72,"props":1467,"children":1468},{"style":85},[1469],{"type":24,"value":113},{"type":19,"tag":72,"props":1471,"children":1472},{"class":74,"line":188},[1473,1477,1481,1485],{"type":19,"tag":72,"props":1474,"children":1475},{"style":95},[1476],{"type":24,"value":1347},{"type":19,"tag":72,"props":1478,"children":1479},{"style":85},[1480],{"type":24,"value":103},{"type":19,"tag":72,"props":1482,"children":1483},{"style":95},[1484],{"type":24,"value":236},{"type":19,"tag":72,"props":1486,"children":1487},{"style":85},[1488],{"type":24,"value":113},{"type":19,"tag":72,"props":1490,"children":1491},{"class":74,"line":221},[1492,1497,1501,1506],{"type":19,"tag":72,"props":1493,"children":1494},{"style":95},[1495],{"type":24,"value":1496},"  masonry-align",{"type":19,"tag":72,"props":1498,"children":1499},{"style":85},[1500],{"type":24,"value":103},{"type":19,"tag":72,"props":1502,"children":1503},{"style":95},[1504],{"type":24,"value":1505},"balance",{"type":19,"tag":72,"props":1507,"children":1508},{"style":85},[1509],{"type":24,"value":113},{"type":19,"tag":72,"props":1511,"children":1512},{"class":74,"line":243},[1513,1517,1521,1526,1530],{"type":19,"tag":72,"props":1514,"children":1515},{"style":95},[1516],{"type":24,"value":249},{"type":19,"tag":72,"props":1518,"children":1519},{"style":85},[1520],{"type":24,"value":103},{"type":19,"tag":72,"props":1522,"children":1523},{"style":95},[1524],{"type":24,"value":1525},"1.5",{"type":19,"tag":72,"props":1527,"children":1528},{"style":163},[1529],{"type":24,"value":1379},{"type":19,"tag":72,"props":1531,"children":1532},{"style":85},[1533],{"type":24,"value":113},{"type":19,"tag":72,"props":1535,"children":1536},{"class":74,"line":268},[1537],{"type":19,"tag":72,"props":1538,"children":1539},{"style":85},[1540],{"type":24,"value":274},{"type":19,"tag":49,"props":1542,"children":1544},{"id":1543},"优势-1",[1545],{"type":24,"value":1129},{"type":19,"tag":913,"props":1547,"children":1548},{},[1549,1559,1569,1579],{"type":19,"tag":861,"props":1550,"children":1551},{},[1552,1557],{"type":19,"tag":865,"props":1553,"children":1554},{},[1555],{"type":24,"value":1556},"设计明确",{"type":24,"value":1558},"：模块专为瀑布流而生，不需要处理 Grid 的所有复杂性",{"type":19,"tag":861,"props":1560,"children":1561},{},[1562,1567],{"type":19,"tag":865,"props":1563,"children":1564},{},[1565],{"type":24,"value":1566},"心理模型清晰",{"type":24,"value":1568},"：Grid 用于有序排列，Flexbox 用于一维流动，Masonry 用于有机填充。三者各司其职",{"type":19,"tag":861,"props":1570,"children":1571},{},[1572,1577],{"type":19,"tag":865,"props":1573,"children":1574},{},[1575],{"type":24,"value":1576},"无需 JavaScript",{"type":24,"value":1578},"：真正的纯 CSS 解决方案，性能更好",{"type":19,"tag":861,"props":1580,"children":1581},{},[1582,1587],{"type":19,"tag":865,"props":1583,"children":1584},{},[1585],{"type":24,"value":1586},"响应式友好",{"type":24,"value":1588},"：内置对流动和自适应的支持，不需要手动计算",{"type":19,"tag":49,"props":1590,"children":1592},{"id":1591},"劣势-1",[1593],{"type":24,"value":1167},{"type":19,"tag":913,"props":1595,"children":1596},{},[1597,1607,1617,1627],{"type":19,"tag":861,"props":1598,"children":1599},{},[1600,1605],{"type":19,"tag":865,"props":1601,"children":1602},{},[1603],{"type":24,"value":1604},"学习曲线",{"type":24,"value":1606},"：又是一个新的 CSS 模块，开发者要学新语法。CSS 已经够复杂了",{"type":19,"tag":861,"props":1608,"children":1609},{},[1610,1615],{"type":19,"tag":865,"props":1611,"children":1612},{},[1613],{"type":24,"value":1614},"浏览器采纳缓慢",{"type":24,"value":1616},"：推出新规范需要浏览器厂商的一致支持，这通常很慢",{"type":19,"tag":861,"props":1618,"children":1619},{},[1620,1625],{"type":19,"tag":865,"props":1621,"children":1622},{},[1623],{"type":24,"value":1624},"选择困惑",{"type":24,"value":1626},"：开发者会纠结\"这个场景我应该用 Grid 还是 Masonry？\"",{"type":19,"tag":861,"props":1628,"children":1629},{},[1630,1635],{"type":19,"tag":865,"props":1631,"children":1632},{},[1633],{"type":24,"value":1634},"规范还未成熟",{"type":24,"value":1636},"：早期讨论中存在许多未定的细节，实现可能需要多年",{"type":19,"tag":32,"props":1638,"children":1640},{"id":1639},"方案三item-flow-统一系统",[1641],{"type":24,"value":1642},"方案三：Item Flow 统一系统",{"type":19,"tag":20,"props":1644,"children":1645},{},[1646,1648,1653],{"type":24,"value":1647},"2025 年 3 月，Apple WebKit 团队提出了 ",{"type":19,"tag":865,"props":1649,"children":1650},{},[1651],{"type":24,"value":1652},"Item Flow",{"type":24,"value":1654},"，一个野心勃勃的新系统，试图统一 Flexbox、Grid 和 Masonry 的概念。",{"type":19,"tag":49,"props":1656,"children":1658},{"id":1657},"核心理念",[1659],{"type":24,"value":1657},{"type":19,"tag":20,"props":1661,"children":1662},{},[1663,1665,1671,1673,1679,1681,1686],{"type":24,"value":1664},"与其在 Grid 中加入 masonry 或创建新模块，Item Flow 直接融合三者的优势。它引入了一个新的 ",{"type":19,"tag":68,"props":1666,"children":1668},{"className":1667},[],[1669],{"type":24,"value":1670},"item-flow",{"type":24,"value":1672}," 速记属性，替代 ",{"type":19,"tag":68,"props":1674,"children":1676},{"className":1675},[],[1677],{"type":24,"value":1678},"flex-flow",{"type":24,"value":1680}," 和 ",{"type":19,"tag":68,"props":1682,"children":1684},{"className":1683},[],[1685],{"type":24,"value":1196},{"type":24,"value":1687},"。",{"type":19,"tag":20,"props":1689,"children":1690},{},[1691],{"type":24,"value":1692},"四个核心属性：",{"type":19,"tag":913,"props":1694,"children":1695},{},[1696,1738,1773,1807],{"type":19,"tag":861,"props":1697,"children":1698},{},[1699,1708,1710,1716,1717,1722,1723,1729,1730,1736],{"type":19,"tag":865,"props":1700,"children":1701},{},[1702],{"type":19,"tag":68,"props":1703,"children":1705},{"className":1704},[],[1706],{"type":24,"value":1707},"item-direction",{"type":24,"value":1709},"：控制流向（",{"type":19,"tag":68,"props":1711,"children":1713},{"className":1712},[],[1714],{"type":24,"value":1715},"row",{"type":24,"value":1190},{"type":19,"tag":68,"props":1718,"children":1720},{"className":1719},[],[1721],{"type":24,"value":236},{"type":24,"value":1190},{"type":19,"tag":68,"props":1724,"children":1726},{"className":1725},[],[1727],{"type":24,"value":1728},"row-reverse",{"type":24,"value":1190},{"type":19,"tag":68,"props":1731,"children":1733},{"className":1732},[],[1734],{"type":24,"value":1735},"column-reverse",{"type":24,"value":1737},"）",{"type":19,"tag":861,"props":1739,"children":1740},{},[1741,1750,1752,1758,1759,1765,1766,1772],{"type":19,"tag":865,"props":1742,"children":1743},{},[1744],{"type":19,"tag":68,"props":1745,"children":1747},{"className":1746},[],[1748],{"type":24,"value":1749},"item-wrap",{"type":24,"value":1751},"：管理换行行为（",{"type":19,"tag":68,"props":1753,"children":1755},{"className":1754},[],[1756],{"type":24,"value":1757},"wrap",{"type":24,"value":1190},{"type":19,"tag":68,"props":1760,"children":1762},{"className":1761},[],[1763],{"type":24,"value":1764},"nowrap",{"type":24,"value":1190},{"type":19,"tag":68,"props":1767,"children":1769},{"className":1768},[],[1770],{"type":24,"value":1771},"wrap-reverse",{"type":24,"value":1737},{"type":19,"tag":861,"props":1774,"children":1775},{},[1776,1785,1787,1793,1794,1800,1801,1806],{"type":19,"tag":865,"props":1777,"children":1778},{},[1779],{"type":19,"tag":68,"props":1780,"children":1782},{"className":1781},[],[1783],{"type":24,"value":1784},"item-pack",{"type":24,"value":1786},"：决定打包密度（",{"type":19,"tag":68,"props":1788,"children":1790},{"className":1789},[],[1791],{"type":24,"value":1792},"sparse",{"type":24,"value":1190},{"type":19,"tag":68,"props":1795,"children":1797},{"className":1796},[],[1798],{"type":24,"value":1799},"dense",{"type":24,"value":1190},{"type":19,"tag":68,"props":1802,"children":1804},{"className":1803},[],[1805],{"type":24,"value":1505},{"type":24,"value":1737},{"type":19,"tag":861,"props":1808,"children":1809},{},[1810,1819],{"type":19,"tag":865,"props":1811,"children":1812},{},[1813],{"type":19,"tag":68,"props":1814,"children":1816},{"className":1815},[],[1817],{"type":24,"value":1818},"item-slack",{"type":24,"value":1820},"：调整容差，允许元素收缩或移位以适应",{"type":19,"tag":49,"props":1822,"children":1824},{"id":1823},"使用示例",[1825],{"type":24,"value":1823},{"type":19,"tag":20,"props":1827,"children":1828},{},[1829],{"type":24,"value":1830},"用 Item Flow 实现瀑布流是一个自然的结果，不是硬加的功能：",{"type":19,"tag":61,"props":1832,"children":1834},{"className":63,"code":1833,"language":65,"meta":7,"style":7},".gallery {\n  display: grid; /* 或 flex */\n  item-flow: column wrap dense;\n  \n  /* 长格式版本 */\n  item-direction: column;\n  item-wrap: wrap;\n  item-pack: dense;\n  \n  gap: 1rem;\n}\n",[1835],{"type":19,"tag":68,"props":1836,"children":1837},{"__ignoreMap":7},[1838,1849,1873,1903,1911,1919,1939,1959,1979,1986,2009],{"type":19,"tag":72,"props":1839,"children":1840},{"class":74,"line":75},[1841,1845],{"type":19,"tag":72,"props":1842,"children":1843},{"style":79},[1844],{"type":24,"value":1434},{"type":19,"tag":72,"props":1846,"children":1847},{"style":85},[1848],{"type":24,"value":88},{"type":19,"tag":72,"props":1850,"children":1851},{"class":74,"line":91},[1852,1856,1860,1864,1868],{"type":19,"tag":72,"props":1853,"children":1854},{"style":95},[1855],{"type":24,"value":98},{"type":19,"tag":72,"props":1857,"children":1858},{"style":85},[1859],{"type":24,"value":103},{"type":19,"tag":72,"props":1861,"children":1862},{"style":95},[1863],{"type":24,"value":108},{"type":19,"tag":72,"props":1865,"children":1866},{"style":85},[1867],{"type":24,"value":212},{"type":19,"tag":72,"props":1869,"children":1870},{"style":215},[1871],{"type":24,"value":1872},"/* 或 flex */\n",{"type":19,"tag":72,"props":1874,"children":1875},{"class":74,"line":116},[1876,1881,1885,1889,1894,1899],{"type":19,"tag":72,"props":1877,"children":1878},{"style":95},[1879],{"type":24,"value":1880},"  item-flow",{"type":19,"tag":72,"props":1882,"children":1883},{"style":85},[1884],{"type":24,"value":103},{"type":19,"tag":72,"props":1886,"children":1887},{"style":95},[1888],{"type":24,"value":236},{"type":19,"tag":72,"props":1890,"children":1891},{"style":95},[1892],{"type":24,"value":1893}," wrap",{"type":19,"tag":72,"props":1895,"children":1896},{"style":95},[1897],{"type":24,"value":1898}," dense",{"type":19,"tag":72,"props":1900,"children":1901},{"style":85},[1902],{"type":24,"value":113},{"type":19,"tag":72,"props":1904,"children":1905},{"class":74,"line":188},[1906],{"type":19,"tag":72,"props":1907,"children":1908},{"style":85},[1909],{"type":24,"value":1910},"  \n",{"type":19,"tag":72,"props":1912,"children":1913},{"class":74,"line":221},[1914],{"type":19,"tag":72,"props":1915,"children":1916},{"style":215},[1917],{"type":24,"value":1918},"  /* 长格式版本 */\n",{"type":19,"tag":72,"props":1920,"children":1921},{"class":74,"line":243},[1922,1927,1931,1935],{"type":19,"tag":72,"props":1923,"children":1924},{"style":95},[1925],{"type":24,"value":1926},"  item-direction",{"type":19,"tag":72,"props":1928,"children":1929},{"style":85},[1930],{"type":24,"value":103},{"type":19,"tag":72,"props":1932,"children":1933},{"style":95},[1934],{"type":24,"value":236},{"type":19,"tag":72,"props":1936,"children":1937},{"style":85},[1938],{"type":24,"value":113},{"type":19,"tag":72,"props":1940,"children":1941},{"class":74,"line":268},[1942,1947,1951,1955],{"type":19,"tag":72,"props":1943,"children":1944},{"style":95},[1945],{"type":24,"value":1946},"  item-wrap",{"type":19,"tag":72,"props":1948,"children":1949},{"style":85},[1950],{"type":24,"value":103},{"type":19,"tag":72,"props":1952,"children":1953},{"style":95},[1954],{"type":24,"value":1757},{"type":19,"tag":72,"props":1956,"children":1957},{"style":85},[1958],{"type":24,"value":113},{"type":19,"tag":72,"props":1960,"children":1961},{"class":74,"line":277},[1962,1967,1971,1975],{"type":19,"tag":72,"props":1963,"children":1964},{"style":95},[1965],{"type":24,"value":1966},"  item-pack",{"type":19,"tag":72,"props":1968,"children":1969},{"style":85},[1970],{"type":24,"value":103},{"type":19,"tag":72,"props":1972,"children":1973},{"style":95},[1974],{"type":24,"value":1799},{"type":19,"tag":72,"props":1976,"children":1977},{"style":85},[1978],{"type":24,"value":113},{"type":19,"tag":72,"props":1980,"children":1981},{"class":74,"line":287},[1982],{"type":19,"tag":72,"props":1983,"children":1984},{"style":85},[1985],{"type":24,"value":1910},{"type":19,"tag":72,"props":1987,"children":1988},{"class":74,"line":300},[1989,1993,1997,2001,2005],{"type":19,"tag":72,"props":1990,"children":1991},{"style":95},[1992],{"type":24,"value":249},{"type":19,"tag":72,"props":1994,"children":1995},{"style":85},[1996],{"type":24,"value":103},{"type":19,"tag":72,"props":1998,"children":1999},{"style":95},[2000],{"type":24,"value":175},{"type":19,"tag":72,"props":2002,"children":2003},{"style":163},[2004],{"type":24,"value":1379},{"type":19,"tag":72,"props":2006,"children":2007},{"style":85},[2008],{"type":24,"value":113},{"type":19,"tag":72,"props":2010,"children":2011},{"class":74,"line":322},[2012],{"type":19,"tag":72,"props":2013,"children":2014},{"style":85},[2015],{"type":24,"value":274},{"type":19,"tag":20,"props":2017,"children":2018},{},[2019,2021,2026,2028,2033,2035,2041,2043,2048],{"type":24,"value":2020},"这里，元素垂直流动，包装成多列，并用 ",{"type":19,"tag":68,"props":2022,"children":2024},{"className":2023},[],[2025],{"type":24,"value":1799},{"type":24,"value":2027},"（密集）打包以最小化间隙。这模仿了瀑布流的有机排列。",{"type":19,"tag":68,"props":2029,"children":2031},{"className":2030},[],[2032],{"type":24,"value":1799},{"type":24,"value":2034}," 选项受到 Grid 的 ",{"type":19,"tag":68,"props":2036,"children":2038},{"className":2037},[],[2039],{"type":24,"value":2040},"auto-flow: dense",{"type":24,"value":2042}," 启发，会重新排序元素以最小化空隙，而 ",{"type":19,"tag":68,"props":2044,"children":2046},{"className":2045},[],[2047],{"type":24,"value":1818},{"type":24,"value":2049}," 可以微调间距以获得视觉平衡。",{"type":19,"tag":49,"props":2051,"children":2053},{"id":2052},"优势-2",[2054],{"type":24,"value":1129},{"type":19,"tag":913,"props":2056,"children":2057},{},[2058,2068,2092,2115],{"type":19,"tag":861,"props":2059,"children":2060},{},[2061,2066],{"type":19,"tag":865,"props":2062,"children":2063},{},[2064],{"type":24,"value":2065},"统一概念",{"type":24,"value":2067},"：Flexbox、Grid 和 Masonry 共享相同的基础属性，学习一次，用处处",{"type":19,"tag":861,"props":2069,"children":2070},{},[2071,2076,2078,2083,2085,2090],{"type":19,"tag":865,"props":2072,"children":2073},{},[2074],{"type":24,"value":2075},"增强现有系统",{"type":24,"value":2077},"：不是替代，而是增强。Grid 可以获得 ",{"type":19,"tag":68,"props":2079,"children":2081},{"className":2080},[],[2082],{"type":24,"value":1764},{"type":24,"value":2084},"，Flexbox 可以获得 ",{"type":19,"tag":68,"props":2086,"children":2088},{"className":2087},[],[2089],{"type":24,"value":1505},{"type":24,"value":2091}," 打包，这些都是长期需求",{"type":19,"tag":861,"props":2093,"children":2094},{},[2095,2100,2102,2107,2108,2113],{"type":19,"tag":865,"props":2096,"children":2097},{},[2098],{"type":24,"value":2099},"向后兼容",{"type":24,"value":2101},"：现有的 ",{"type":19,"tag":68,"props":2103,"children":2105},{"className":2104},[],[2106],{"type":24,"value":1678},{"type":24,"value":1680},{"type":19,"tag":68,"props":2109,"children":2111},{"className":2110},[],[2112],{"type":24,"value":1196},{"type":24,"value":2114}," 可以平滑地迁移",{"type":19,"tag":861,"props":2116,"children":2117},{},[2118,2123,2125,2130],{"type":19,"tag":865,"props":2119,"children":2120},{},[2121],{"type":24,"value":2122},"灵活性",{"type":24,"value":2124},"：",{"type":19,"tag":68,"props":2126,"children":2128},{"className":2127},[],[2129],{"type":24,"value":1818},{"type":24,"value":2131}," 提供了微调空间，适应各种设计需求",{"type":19,"tag":49,"props":2133,"children":2135},{"id":2134},"劣势-2",[2136],{"type":24,"value":1167},{"type":19,"tag":913,"props":2138,"children":2139},{},[2140,2150,2166,2176],{"type":19,"tag":861,"props":2141,"children":2142},{},[2143,2148],{"type":19,"tag":865,"props":2144,"children":2145},{},[2146],{"type":24,"value":2147},"未来功能",{"type":24,"value":2149},"：截至 2025 年 4 月，还没有浏览器实现 Item Flow。规范仍在讨论中，采纳时间不确定",{"type":19,"tag":861,"props":2151,"children":2152},{},[2153,2158,2159,2164],{"type":19,"tag":865,"props":2154,"children":2155},{},[2156],{"type":24,"value":2157},"命名问题",{"type":24,"value":2124},{"type":19,"tag":68,"props":2160,"children":2162},{"className":2161},[],[2163],{"type":24,"value":1818},{"type":24,"value":2165}," 等属性名称因clarity issue（特别是对非英语使用者）而面临命名辩论",{"type":19,"tag":861,"props":2167,"children":2168},{},[2169,2174],{"type":19,"tag":865,"props":2170,"children":2171},{},[2172],{"type":24,"value":2173},"社区接受度未知",{"type":24,"value":2175},"：这是一个全新的概念，能否得到浏览器厂商和开发者社区的支持还不明确",{"type":19,"tag":861,"props":2177,"children":2178},{},[2179,2184],{"type":19,"tag":865,"props":2180,"children":2181},{},[2182],{"type":24,"value":2183},"规范成熟度",{"type":24,"value":2185},"：CSS 工作组仍在收集反馈，最终形态可能会大幅变化",{"type":19,"tag":32,"props":2187,"children":2189},{"id":2188},"如何选择",[2190],{"type":24,"value":2191},"如何选择？",{"type":19,"tag":20,"props":2193,"children":2194},{},[2195],{"type":24,"value":2196},"面对三种方案，开发者该如何是好？",{"type":19,"tag":2198,"props":2199,"children":2200},"table",{},[2201,2230],{"type":19,"tag":2202,"props":2203,"children":2204},"thead",{},[2205],{"type":19,"tag":2206,"props":2207,"children":2208},"tr",{},[2209,2215,2220,2225],{"type":19,"tag":2210,"props":2211,"children":2212},"th",{},[2213],{"type":24,"value":2214},"方案",{"type":19,"tag":2210,"props":2216,"children":2217},{},[2218],{"type":24,"value":2219},"优点",{"type":19,"tag":2210,"props":2221,"children":2222},{},[2223],{"type":24,"value":2224},"缺点",{"type":19,"tag":2210,"props":2226,"children":2227},{},[2228],{"type":24,"value":2229},"现状",{"type":19,"tag":2231,"props":2232,"children":2233},"tbody",{},[2234,2261,2287],{"type":19,"tag":2206,"props":2235,"children":2236},{},[2237,2246,2251,2256],{"type":19,"tag":2238,"props":2239,"children":2240},"td",{},[2241],{"type":19,"tag":865,"props":2242,"children":2243},{},[2244],{"type":24,"value":2245},"Grid 扩展",{"type":19,"tag":2238,"props":2247,"children":2248},{},[2249],{"type":24,"value":2250},"熟悉、工具支持好",{"type":19,"tag":2238,"props":2252,"children":2253},{},[2254],{"type":24,"value":2255},"复杂、兼容性差、边界情况模糊",{"type":19,"tag":2238,"props":2257,"children":2258},{},[2259],{"type":24,"value":2260},"Firefox Nightly 实验性",{"type":19,"tag":2206,"props":2262,"children":2263},{},[2264,2272,2277,2282],{"type":19,"tag":2238,"props":2265,"children":2266},{},[2267],{"type":19,"tag":865,"props":2268,"children":2269},{},[2270],{"type":24,"value":2271},"独立 Masonry",{"type":19,"tag":2238,"props":2273,"children":2274},{},[2275],{"type":24,"value":2276},"设计清晰、专用",{"type":19,"tag":2238,"props":2278,"children":2279},{},[2280],{"type":24,"value":2281},"学习新语法、浏览器采纳慢",{"type":19,"tag":2238,"props":2283,"children":2284},{},[2285],{"type":24,"value":2286},"概念阶段，未实现",{"type":19,"tag":2206,"props":2288,"children":2289},{},[2290,2297,2302,2307],{"type":19,"tag":2238,"props":2291,"children":2292},{},[2293],{"type":19,"tag":865,"props":2294,"children":2295},{},[2296],{"type":24,"value":1652},{"type":19,"tag":2238,"props":2298,"children":2299},{},[2300],{"type":24,"value":2301},"统一优雅、功能强大",{"type":19,"tag":2238,"props":2303,"children":2304},{},[2305],{"type":24,"value":2306},"尚未实现、命名有争议",{"type":19,"tag":2238,"props":2308,"children":2309},{},[2310],{"type":24,"value":2311},"WebKit 提案，讨论中",{"type":19,"tag":49,"props":2313,"children":2315},{"id":2314},"现在的建议",[2316],{"type":24,"value":2314},{"type":19,"tag":20,"props":2318,"children":2319},{},[2320,2325],{"type":19,"tag":865,"props":2321,"children":2322},{},[2323],{"type":24,"value":2324},"短期",{"type":24,"value":2326},"（现在到 2026 年）：",{"type":19,"tag":913,"props":2328,"children":2329},{},[2330,2335],{"type":19,"tag":861,"props":2331,"children":2332},{},[2333],{"type":24,"value":2334},"如果必须实现瀑布流，使用经过验证的 JavaScript 库（如 Masonry.js）或 CSS Grid + JavaScript 组合",{"type":19,"tag":861,"props":2336,"children":2337},{},[2338,2340,2346],{"type":24,"value":2339},"在 Firefox 上可以尝试 ",{"type":19,"tag":68,"props":2341,"children":2343},{"className":2342},[],[2344],{"type":24,"value":2345},"grid-template-rows: masonry",{"type":24,"value":2347},"，但不要用于生产环境",{"type":19,"tag":20,"props":2349,"children":2350},{},[2351,2356],{"type":19,"tag":865,"props":2352,"children":2353},{},[2354],{"type":24,"value":2355},"中期",{"type":24,"value":2357},"（2026-2027 年）：",{"type":19,"tag":913,"props":2359,"children":2360},{},[2361,2366],{"type":19,"tag":861,"props":2362,"children":2363},{},[2364],{"type":24,"value":2365},"关注 Item Flow 的发展。如果浏览器开始支持，这可能是最优选择",{"type":19,"tag":861,"props":2367,"children":2368},{},[2369],{"type":24,"value":2370},"保持现有实现可维护，准备好迁移路径",{"type":19,"tag":20,"props":2372,"children":2373},{},[2374,2379],{"type":19,"tag":865,"props":2375,"children":2376},{},[2377],{"type":24,"value":2378},"长期",{"type":24,"value":2124},{"type":19,"tag":913,"props":2381,"children":2382},{},[2383,2388],{"type":19,"tag":861,"props":2384,"children":2385},{},[2386],{"type":24,"value":2387},"一旦 Item Flow 在主流浏览器中支持，这将成为标准做法",{"type":19,"tag":861,"props":2389,"children":2390},{},[2391],{"type":24,"value":2392},"或者如果独立 Masonry 模块最终胜出，准备学习新语法",{"type":19,"tag":32,"props":2394,"children":2396},{"id":2395},"实战建议",[2397],{"type":24,"value":2395},{"type":19,"tag":49,"props":2399,"children":2401},{"id":2400},"分析你的场景",[2402],{"type":24,"value":2400},{"type":19,"tag":857,"props":2404,"children":2405},{},[2406,2427,2448],{"type":19,"tag":861,"props":2407,"children":2408},{},[2409,2414],{"type":19,"tag":865,"props":2410,"children":2411},{},[2412],{"type":24,"value":2413},"瀑布流效果有多关键？",{"type":19,"tag":913,"props":2415,"children":2416},{},[2417,2422],{"type":19,"tag":861,"props":2418,"children":2419},{},[2420],{"type":24,"value":2421},"如果只是\"看起来不错\"，CSS Grid + 少量 JavaScript 足够",{"type":19,"tag":861,"props":2423,"children":2424},{},[2425],{"type":24,"value":2426},"如果是核心用户体验，等等 Item Flow 或独立 Masonry",{"type":19,"tag":861,"props":2428,"children":2429},{},[2430,2435],{"type":19,"tag":865,"props":2431,"children":2432},{},[2433],{"type":24,"value":2434},"浏览器要求有多严格？",{"type":19,"tag":913,"props":2436,"children":2437},{},[2438,2443],{"type":19,"tag":861,"props":2439,"children":2440},{},[2441],{"type":24,"value":2442},"需要完美支持旧浏览器？只能用 JavaScript 库",{"type":19,"tag":861,"props":2444,"children":2445},{},[2446],{"type":24,"value":2447},"可以要求现代浏览器？可以尝试 Grid 黑科技",{"type":19,"tag":861,"props":2449,"children":2450},{},[2451,2456],{"type":19,"tag":865,"props":2452,"children":2453},{},[2454],{"type":24,"value":2455},"性能有多重要？",{"type":19,"tag":913,"props":2457,"children":2458},{},[2459,2464],{"type":19,"tag":861,"props":2460,"children":2461},{},[2462],{"type":24,"value":2463},"内容多且频繁变化？等待原生 CSS 解决方案",{"type":19,"tag":861,"props":2465,"children":2466},{},[2467],{"type":24,"value":2468},"内容相对固定？当前的 JavaScript 方案可接受",{"type":19,"tag":49,"props":2470,"children":2472},{"id":2471},"优化当前实现",[2473],{"type":24,"value":2471},{"type":19,"tag":20,"props":2475,"children":2476},{},[2477],{"type":24,"value":2478},"如果你现在必须使用 JavaScript 解决方案，优化策略：",{"type":19,"tag":61,"props":2480,"children":2482},{"className":63,"code":2481,"language":65,"meta":7,"style":7},"/* 使用 ResizeObserver 而不是 resize 事件，性能更好 */\nconst resizeObserver = new ResizeObserver(() => {\n  applyMasonry();\n});\n\nresizeObserver.observe(document.querySelector('.masonry-grid'));\n\n/* 使用防抖减少计算频率 */\nfunction debounce(fn, delay) {\n  let id;\n  return () => {\n    clearTimeout(id);\n    id = setTimeout(fn, delay);\n  };\n}\n\nwindow.addEventListener('resize', debounce(applyMasonry, 300));\n\n/* 考虑虚拟滚动处理大列表 */\n// 只在可视区域内计算和渲染元素\n",[2483],{"type":19,"tag":68,"props":2484,"children":2485},{"__ignoreMap":7},[2486,2494,2511,2524,2532,2539,2557,2564,2572,2580,2597,2610,2631,2671,2679,2686,2693,2701,2709,2718],{"type":19,"tag":72,"props":2487,"children":2488},{"class":74,"line":75},[2489],{"type":19,"tag":72,"props":2490,"children":2491},{"style":215},[2492],{"type":24,"value":2493},"/* 使用 ResizeObserver 而不是 resize 事件，性能更好 */\n",{"type":19,"tag":72,"props":2495,"children":2496},{"class":74,"line":91},[2497,2502,2507],{"type":19,"tag":72,"props":2498,"children":2499},{"style":85},[2500],{"type":24,"value":2501},"const resizeObserver = new ResizeObserver(() =",{"type":19,"tag":72,"props":2503,"children":2504},{"style":163},[2505],{"type":24,"value":2506},">",{"type":19,"tag":72,"props":2508,"children":2509},{"style":85},[2510],{"type":24,"value":88},{"type":19,"tag":72,"props":2512,"children":2513},{"class":74,"line":116},[2514,2519],{"type":19,"tag":72,"props":2515,"children":2516},{"style":95},[2517],{"type":24,"value":2518},"  applyMasonry",{"type":19,"tag":72,"props":2520,"children":2521},{"style":85},[2522],{"type":24,"value":2523},"();\n",{"type":19,"tag":72,"props":2525,"children":2526},{"class":74,"line":188},[2527],{"type":19,"tag":72,"props":2528,"children":2529},{"style":85},[2530],{"type":24,"value":2531},"});\n",{"type":19,"tag":72,"props":2533,"children":2534},{"class":74,"line":221},[2535],{"type":19,"tag":72,"props":2536,"children":2537},{"emptyLinePlaceholder":281},[2538],{"type":24,"value":284},{"type":19,"tag":72,"props":2540,"children":2541},{"class":74,"line":243},[2542,2547,2553],{"type":19,"tag":72,"props":2543,"children":2544},{"style":85},[2545],{"type":24,"value":2546},"resizeObserver.observe(document.querySelector('",{"type":19,"tag":72,"props":2548,"children":2550},{"style":2549},"--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic",[2551],{"type":24,"value":2552},".masonry-grid'",{"type":19,"tag":72,"props":2554,"children":2555},{"style":85},[2556],{"type":24,"value":185},{"type":19,"tag":72,"props":2558,"children":2559},{"class":74,"line":268},[2560],{"type":19,"tag":72,"props":2561,"children":2562},{"emptyLinePlaceholder":281},[2563],{"type":24,"value":284},{"type":19,"tag":72,"props":2565,"children":2566},{"class":74,"line":277},[2567],{"type":19,"tag":72,"props":2568,"children":2569},{"style":215},[2570],{"type":24,"value":2571},"/* 使用防抖减少计算频率 */\n",{"type":19,"tag":72,"props":2573,"children":2574},{"class":74,"line":287},[2575],{"type":19,"tag":72,"props":2576,"children":2577},{"style":85},[2578],{"type":24,"value":2579},"function debounce(fn, delay) {\n",{"type":19,"tag":72,"props":2581,"children":2582},{"class":74,"line":300},[2583,2588,2593],{"type":19,"tag":72,"props":2584,"children":2585},{"style":95},[2586],{"type":24,"value":2587},"  let",{"type":19,"tag":72,"props":2589,"children":2590},{"style":95},[2591],{"type":24,"value":2592}," id",{"type":19,"tag":72,"props":2594,"children":2595},{"style":85},[2596],{"type":24,"value":113},{"type":19,"tag":72,"props":2598,"children":2599},{"class":74,"line":322},[2600,2605],{"type":19,"tag":72,"props":2601,"children":2602},{"style":95},[2603],{"type":24,"value":2604},"  return",{"type":19,"tag":72,"props":2606,"children":2607},{"style":85},[2608],{"type":24,"value":2609}," () => {\n",{"type":19,"tag":72,"props":2611,"children":2612},{"class":74,"line":330},[2613,2618,2622,2627],{"type":19,"tag":72,"props":2614,"children":2615},{"style":95},[2616],{"type":24,"value":2617},"    clearTimeout",{"type":19,"tag":72,"props":2619,"children":2620},{"style":85},[2621],{"type":24,"value":136},{"type":19,"tag":72,"props":2623,"children":2624},{"style":95},[2625],{"type":24,"value":2626},"id",{"type":19,"tag":72,"props":2628,"children":2629},{"style":85},[2630],{"type":24,"value":506},{"type":19,"tag":72,"props":2632,"children":2633},{"class":74,"line":338},[2634,2639,2644,2649,2653,2658,2662,2667],{"type":19,"tag":72,"props":2635,"children":2636},{"style":95},[2637],{"type":24,"value":2638},"    id",{"type":19,"tag":72,"props":2640,"children":2641},{"style":85},[2642],{"type":24,"value":2643}," = ",{"type":19,"tag":72,"props":2645,"children":2646},{"style":95},[2647],{"type":24,"value":2648},"setTimeout",{"type":19,"tag":72,"props":2650,"children":2651},{"style":85},[2652],{"type":24,"value":136},{"type":19,"tag":72,"props":2654,"children":2655},{"style":95},[2656],{"type":24,"value":2657},"fn",{"type":19,"tag":72,"props":2659,"children":2660},{"style":85},[2661],{"type":24,"value":146},{"type":19,"tag":72,"props":2663,"children":2664},{"style":95},[2665],{"type":24,"value":2666},"delay",{"type":19,"tag":72,"props":2668,"children":2669},{"style":85},[2670],{"type":24,"value":506},{"type":19,"tag":72,"props":2672,"children":2673},{"class":74,"line":356},[2674],{"type":19,"tag":72,"props":2675,"children":2676},{"style":85},[2677],{"type":24,"value":2678},"  };\n",{"type":19,"tag":72,"props":2680,"children":2681},{"class":74,"line":383},[2682],{"type":19,"tag":72,"props":2683,"children":2684},{"style":85},[2685],{"type":24,"value":274},{"type":19,"tag":72,"props":2687,"children":2688},{"class":74,"line":405},[2689],{"type":19,"tag":72,"props":2690,"children":2691},{"emptyLinePlaceholder":281},[2692],{"type":24,"value":284},{"type":19,"tag":72,"props":2694,"children":2695},{"class":74,"line":426},[2696],{"type":19,"tag":72,"props":2697,"children":2698},{"style":85},[2699],{"type":24,"value":2700},"window.addEventListener('resize', debounce(applyMasonry, 300));\n",{"type":19,"tag":72,"props":2702,"children":2704},{"class":74,"line":2703},18,[2705],{"type":19,"tag":72,"props":2706,"children":2707},{"emptyLinePlaceholder":281},[2708],{"type":24,"value":284},{"type":19,"tag":72,"props":2710,"children":2712},{"class":74,"line":2711},19,[2713],{"type":19,"tag":72,"props":2714,"children":2715},{"style":215},[2716],{"type":24,"value":2717},"/* 考虑虚拟滚动处理大列表 */\n",{"type":19,"tag":72,"props":2719,"children":2721},{"class":74,"line":2720},20,[2722],{"type":19,"tag":72,"props":2723,"children":2724},{"style":85},[2725],{"type":24,"value":2726},"// 只在可视区域内计算和渲染元素\n",{"type":19,"tag":32,"props":2728,"children":2730},{"id":2729},"结论等待还是行动",[2731],{"type":24,"value":2732},"结论：等待还是行动？",{"type":19,"tag":20,"props":2734,"children":2735},{},[2736],{"type":24,"value":2737},"CSS 瀑布流的故事还在书写。我们有三条路可走：",{"type":19,"tag":857,"props":2739,"children":2740},{},[2741,2746,2751],{"type":19,"tag":861,"props":2742,"children":2743},{},[2744],{"type":24,"value":2745},"让 Grid 承载瀑布流——熟悉但有点笨重",{"type":19,"tag":861,"props":2747,"children":2748},{},[2749],{"type":24,"value":2750},"创建专用 Masonry 模块——干净但陌生",{"type":19,"tag":861,"props":2752,"children":2753},{},[2754],{"type":24,"value":2755},"用 Item Flow 统一一切——优雅但还要等",{"type":19,"tag":20,"props":2757,"children":2758},{},[2759,2764],{"type":19,"tag":865,"props":2760,"children":2761},{},[2762],{"type":24,"value":2763},"现在的现实是",{"type":24,"value":2765},"：没有完美的原生解决方案。但好消息是，这个问题正被重视，CSS 工作组和浏览器厂商在认真讨论。",{"type":19,"tag":20,"props":2767,"children":2768},{},[2769,2774],{"type":19,"tag":865,"props":2770,"children":2771},{},[2772],{"type":24,"value":2773},"我的建议",{"type":24,"value":2124},{"type":19,"tag":913,"props":2776,"children":2777},{},[2778,2790,2802],{"type":19,"tag":861,"props":2779,"children":2780},{},[2781,2783,2788],{"type":24,"value":2782},"如果项目不急，",{"type":19,"tag":865,"props":2784,"children":2785},{},[2786],{"type":24,"value":2787},"观察 Item Flow 的进展",{"type":24,"value":2789},"，这很可能成为最终赢家",{"type":19,"tag":861,"props":2791,"children":2792},{},[2793,2795,2800],{"type":24,"value":2794},"如果必须现在实现，",{"type":19,"tag":865,"props":2796,"children":2797},{},[2798],{"type":24,"value":2799},"使用经过验证的 JavaScript 方案或库",{"type":24,"value":2801},"，并保持代码的可维护性，为未来的迁移做准备",{"type":19,"tag":861,"props":2803,"children":2804},{},[2805,2810],{"type":19,"tag":865,"props":2806,"children":2807},{},[2808],{"type":24,"value":2809},"参与讨论",{"type":24,"value":2811},"：在 CSS 工作组的 GitHub 问题中提供反馈，开发者的声音很重要",{"type":19,"tag":20,"props":2813,"children":2814},{},[2815],{"type":24,"value":2816},"CSS 最终会给我们一个优雅的瀑布流解决方案。问题只是时间问题。",{"type":19,"tag":2818,"props":2819,"children":2820},"style",{},[2821],{"type":24,"value":2822},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":116,"depth":116,"links":2824},[2825,2829,2835,2840,2846,2849,2853],{"id":34,"depth":91,"text":37,"children":2826},[2827,2828],{"id":51,"depth":116,"text":54},{"id":904,"depth":116,"text":904},{"id":948,"depth":91,"text":951,"children":2830},[2831,2832,2833,2834],{"id":975,"depth":116,"text":975},{"id":1129,"depth":116,"text":1129},{"id":1167,"depth":116,"text":1167},{"id":1249,"depth":116,"text":1249},{"id":1282,"depth":91,"text":1285,"children":2836},[2837,2838,2839],{"id":1301,"depth":116,"text":975},{"id":1543,"depth":116,"text":1129},{"id":1591,"depth":116,"text":1167},{"id":1639,"depth":91,"text":1642,"children":2841},[2842,2843,2844,2845],{"id":1657,"depth":116,"text":1657},{"id":1823,"depth":116,"text":1823},{"id":2052,"depth":116,"text":1129},{"id":2134,"depth":116,"text":1167},{"id":2188,"depth":91,"text":2191,"children":2847},[2848],{"id":2314,"depth":116,"text":2314},{"id":2395,"depth":91,"text":2395,"children":2850},[2851,2852],{"id":2400,"depth":116,"text":2400},{"id":2471,"depth":116,"text":2471},{"id":2729,"depth":91,"text":2732},"markdown","content:blog:masonry-css-layout.md","content","blog/masonry-css-layout.md","blog/masonry-css-layout","md",[2861,2871,2879],{"_path":2862,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2863,"description":2864,"keywords":2865,"author":11,"date":2866,"category":2867,"image":14,"_type":2854,"_id":2868,"_source":2856,"_file":2869,"_stem":2870,"_extension":2859},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","2025-11-26","待分类","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":2872,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2873,"description":2874,"keywords":2875,"author":11,"date":2866,"category":2867,"image":14,"_type":2854,"_id":2876,"_source":2856,"_file":2877,"_stem":2878,"_extension":2859},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":2880,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":2881,"description":2882,"keywords":2883,"author":11,"date":2866,"category":2867,"image":14,"_type":2854,"_id":2884,"_source":2856,"_file":2885,"_stem":2886,"_extension":2859},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945275997]