这种H5页面怎么布局实现？
以屏幕宽度的1/6为一等分
后台获取的有图片的src，还有图片宽高是几等分
比如 story -> shots -> size -> colSpan和rowSpan是宽高为六分之几
如果一行放不下就换行，换行后把图片插入到上一行缺口里或者放不下就另起一行
是IOS的APP里插入的H5页面...不过我看到有个PC网站比较类似 http://colrd.com/
{
"id": "596315ea6fc50822582ad965",
"title": "不仅仅是",
"subtitle": "地对地",
"story": {
"layout": {
"cols": 6
},
"cover": {
"order": 0,
"content": {
"id": "596315ea6fc50822582ad956",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad957",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_6c6556fc53474c9fa13ebb4518e0d789"
}
},
"picArea": {
"startLoc": {
"xPct": -1,
"yPct": -1
},
"endLoc": {
"xPct": -1,
"yPct": -1
}
}
},
"shots": [
{
"order": 1,
"content": {
"id": "596315ea6fc50822582ad958",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad959",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_813796f19ecb434f95aa7a7fa75d5a03"
}
},
"size": {
"colSpan": 4,
"rowSpan": 3
},
"picAreaInShot": {
"startLoc": {
"xPct": -1,
"yPct": -1
},
"endLoc": {
"xPct": -1,
"yPct": -1
}
}
},
{
"order": 2,
"content": {
"id": "596315ea6fc50822582ad95a",
"type": "text",
"text": "先进的打击",
"charStyle": "normal",
"alignment": "left"
},
"size": {
"colSpan": 6,
"rowSpan": 1
}
},
{
"order": 3,
"content": {
"id": "596315ea6fc50822582ad95b",
"type": "video",
"bodyFile": {
"id": "596315ea6fc50822582ad95c",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_vid_e58411f8dc334b1ebcd6b40ccaf39eeb"
},
"coverFile": {
"id": "596315ea6fc50822582ad95d",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_f6c18852d2e84f049ef1721630da35ce"
},
"openingFile": {
"id": "596316006fc50822582ad966",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_vid_e9cf89fb1bbf421fbd9bb4158e82c227"
}
},
"size": {
"colSpan": 3,
"rowSpan": 3
}
},
{
"order": 4,
"content": {
"id": "596315ea6fc50822582ad95e",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad95f",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_3e7682175dbb4a979bc104b29434a1d8"
}
},
"size": {
"colSpan": 3,
"rowSpan": 6
},
"picAreaInShot": {
"startLoc": {
"xPct": -1,
"yPct": -1
},
"endLoc": {
"xPct": -1,
"yPct": -1
}
}
},
{
"order": 5,
"content": {
"id": "596315ea6fc50822582ad960",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad961",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_50343c5f21184e6e9c6f44b45c78fec5"
}
},
"size": {
"colSpan": 3,
"rowSpan": 3
},
"picAreaInShot": {
"startLoc": {
"xPct": -1,
"yPct": -1
},
"endLoc": {
"xPct": -1,
"yPct": -1
}
}
},
{
"order": 6,
"content": {
"id": "596315ea6fc50822582ad962",
"type": "text",
"text": "信基督教的家",
"charStyle": "normal",
"alignment": "left"
},
"size": {
"colSpan": 6,
"rowSpan": 1
}
},
{
"order": 7,
"content": {
"id": "596315ea6fc50822582ad963",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad964",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_9ce5494c2cba4b119d40a4da7ada8b82"
}
},
"size": {
"colSpan": 6,
"rowSpan": 4
},
"picAreaInShot": {
"startLoc": {
"xPct": -1,
"yPct": -1
},
"endLoc": {
"xPct": -1,
"yPct": -1
}
}
}
]
},
"presentation": {
"browseMode": "vertical",
"slides": [
{
"order": 0,
"content": {
"id": "596315ea6fc50822582ad956",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad957",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_6c6556fc53474c9fa13ebb4518e0d789"
}
}
},
{
"order": 1,
"content": {
"id": "596315ea6fc50822582ad958",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad959",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_813796f19ecb434f95aa7a7fa75d5a03"
}
}
},
{
"order": 2,
"content": {
"id": "596315ea6fc50822582ad95a",
"type": "text",
"text": "先进的打击",
"charStyle": "normal",
"alignment": "left"
}
},
{
"order": 3,
"content": {
"id": "596315ea6fc50822582ad95b",
"type": "video",
"bodyFile": {
"id": "596315ea6fc50822582ad95c",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_vid_e58411f8dc334b1ebcd6b40ccaf39eeb"
},
"coverFile": {
"id": "596315ea6fc50822582ad95d",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_f6c18852d2e84f049ef1721630da35ce"
},
"openingFile": {
"id": "596316006fc50822582ad966",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_vid_e9cf89fb1bbf421fbd9bb4158e82c227"
}
}
},
{
"order": 4,
"content": {
"id": "596315ea6fc50822582ad95e",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad95f",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_3e7682175dbb4a979bc104b29434a1d8"
}
}
},
{
"order": 5,
"content": {
"id": "596315ea6fc50822582ad960",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad961",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_50343c5f21184e6e9c6f44b45c78fec5"
}
}
},
{
"order": 6,
"content": {
"id": "596315ea6fc50822582ad962",
"type": "text",
"text": "信基督教的家",
"charStyle": "normal",
"alignment": "left"
}
},
{
"order": 7,
"content": {
"id": "596315ea6fc50822582ad963",
"type": "image",
"bodyFile": {
"id": "596315ea6fc50822582ad964",
"url": "http://7xj3ch.com2.z0.glb.qiniucdn.com/wk_img_9ce5494c2cba4b119d40a4da7ada8b82"
}
}
}
]
},
"author": {
"id": "595eeaf2fc7c446676c773c5",
"nickname": "黑眼圈",
"commonAvatarUrl": "http://7xj3ch.com2.z0.glb.qiniucdn.com/av_img_2a1959cd6e164ccba6be105bfc975a16/av90x",
"maxAvatarUrl": "http://7xj3ch.com2.z0.glb.qiniucdn.com/av_img_2a1959cd6e164ccba6be105bfc975a16/av300x",
"group": "amateur"
},
"isLiked": false,
"isFavored": false,
"stats": {
"viewTimes": 0,
"likeTimes": 0,
"favoriteTimes": 0,
"commentTimes": 0
}
}如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
flex 布局
grid 布局比 flex 更方便
瀑布流