[{"attributes":{"bold":true},"insert":"本DEMO仅为前端界面开发示例，页面交互逻辑和功能需自行添加。"},{"insert":"\n关键步骤：\n①利用行、列、文本、图片、瀑布流容器等组件搭建顶栏，左侧栏，瀑布流内容区基础UI界面\n②顶栏自适应：\n根据参考“小红书”顶栏有PC端、Pad、手机端三种不同变化，故根据参考制作了三套顶栏UI"},{"attributes":{"list":"bullet"},"insert":"\n"},{"insert":"通过设置【环境宽】实现在不同宽度下变化UI显示效果"},{"attributes":{"indent":1,"list":"bullet"},"insert":"\n"},{"insert":{"image":"R10580997-90ce7b708af93d8be9a07d173f847b26_34230_805_319.png"}},{"attributes":{"indent":2,"list":"bullet"},"insert":"\n"},{"insert":"三套UI宽度都是100%，故为了各自显示时其余UI不影响，需要配合行列的【剪切】属性——宽高超出行列的元素不会显示"},{"attributes":{"list":"bullet"},"insert":"\n"},{"insert":{"image":"R10580997-a6dc8c108f7fcc319f6ccc2aa0d68907_2378_259_43.png"}},{"attributes":{"indent":1,"list":"bullet"},"insert":"\n"},{"insert":"③左侧栏自适应手机端隐藏\n根据原参考，左侧列在手机端大小时隐藏，实现方法与上述相关，但仅需一套UI，环境宽在移动端时为0即可"},{"attributes":{"list":"bullet"},"insert":"\n"},{"insert":{"image":"R10580997-d247703114dce44316531d2e356ae485_13946_276_323.png"}},{"attributes":{"indent":1,"list":"bullet"},"insert":"\n"},{"insert":{"image":"R10580997-77ad0c64ec39ce1db5c6987fc80a1a2b_7102_157_188.png"}},{"attributes":{"indent":1,"list":"bullet"},"insert":"\n"},{"insert":"\n\n④瀑布流区自适应\n瀑布流容器组件本身设计是定宽不定高\n\n瀑布流卡片的宽度由瀑布流宽度的【每列宽度】控制\n"},{"insert":{"image":"R10580997-24df55b327de37713d0142ae6855f577_23879_346_75.png"}},{"insert":"\n可以绑定一个变量动态控制\n\n本Demo是用行组件的【宽度变化】事件条件判断各宽度下的变化，参考原小红书案例的变化效果，计算（瀑布流区行实际宽度÷列数-列间隔距离）获取单个卡片的宽度赋值到瀑布流容器【每列宽度】属性动态绑定的变量上\n瀑布流卡片每列宽度始终大于200\n"},{"insert":{"image":"R10580997-9718e43881db23aaae7b71c33456865b_91390_1037_795.png"}},{"insert":"\n"}]
[{"insert":"1、导航栏电脑端和手机端的切换。2、长短图瀑布流的自适应框架\n"}]
利用行列的【环境宽】属性配合【剪切】属性设置实现自适应（自适应PC端、Pad、手机端。）
利用行列的【环境宽】属性配合【剪切】属性设置实现自适应（自适应PC端、Pad、手机端。）
["ih5-masonry-container","ih5-layoutcol","ih5-layoutrow"]
R10580997-61a3a86c7bce2c86eec2b9cfd558c862_1435355_1867_944.png
https://v4pre.h5sys.cn/play/XxFbROMR