CSS3如何实现微信小程序瀑布流布局?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
1。column-count属性规定元素应该被分隔的列数:
-moz-column-count: 3;/* Firefox */-webkit-column-count: 3;/* Safari和Chrome */column-count: 3; 2。纵队间隔属性规定列之间的间隔:
-moz-column-gap: 40像素;/* Firefox */-webkit-column-gap: 40像素;/* Safari和Chrome */纵队间隔:40 px; 3。column-rule属性设置列之间的宽度,样式和颜色规则。
-moz-column-rule: 3 px开始# ff0000;/* Firefox */-webkit-column-rule: 3 px开始# ff0000;/* Safari和Chrome */column-rule: 3 px开始# ff0000; 4。列空间属性规定元素应横跨多少列。
ie 10和歌剧支持列空间属性。
Safari和Chrome支持替代的-webkit-column-span属性。
/只有铬和歌剧支持列空间属性。/
-webkit-column-span:;/* */铬
列空间:所有; 5。列宽属性规定列的宽度。
ie 10和歌剧支持列宽属性。
Firefox支持替代的-moz-column-width属性。
Safari和Chrome支持替代的-webkit-column-width属性。
注释:Internet Explorer 9以及更早版本的浏览器不支持列宽属性。
列宽:100 px;
-moz-column-width: 100 px;/* Firefox */-webkit-column-width: 100 px;/* Safari和Chrome */ 微信小程序瀑布流布局
<强> wxml
& lt;视图类=& # 39;case-page& # 39;比;
& lt;视图类=& # 39;list-masonry& # 39;比;
& lt;视图类=& # 39;item-masonry& # 39;天气:=皗{注意}}“比;
& lt;图像src=https://www.yisu.com/zixun/{{item.url}}的模式=' widthFix '>
<文本> {{item.title}}
<强> wxs
页面{
background - color: # eee;
｝
.case-page {
填充:20 rpx;
｝
.list-masonry {
column-count: 2;
纵队间隔:20 rpx;
｝
.item-masonry {
background - color: # fff;
break-inside:避免;/*避免在元素内部插入分页符*/box-sizing: border-box;
填充:20 rpx;
margin-bottom: 20 rpx;
｝
{.item-masonry形象
宽度:100%;
} <>强JS
页面({/* *
*页面的初始数据
*/数据:{
imgWidth: 0, imgHeight: 0,
注意:[
{
标题:& # 39;案例名称& # 39;,
url: & # 39; https://cache.yisu.com/upload/information/20200318/93/10901.jpg& # 39;
}，
{
标题:& # 39;你所不知道的红酒知识& # 39;,
url: & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
}，
{
标题:& # 39;红酒知识& # 39;,
url: & # 39; http://f10.baidu.com/it/u=121654667, 1482133440, fm=72 & # 39;
}，
{
标题:& # 39;案例名称& # 39;,
url: & # 39; https://cache.yisu.com/upload/information/20200318/93/10902.jpg& # 39;
}，
{
标题:& # 39;案例名称& # 39;,
url: & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
}，
{
标题:& # 39;案例名称& # 39;,
url: & # 39; http://f10.baidu.com/it/u=121654667, 1482133440, fm=72 & # 39;
}，
{
标题:& # 39;案例名称& # 39;,
url: & # 39; http://img4.imgtn.bdimg.com/it/u=2748975304, 2710656664, fm=26, gp=0. jpg # 39;
}，
{
标题:& # 39;案例名称& # 39;,
url: & # 39; http://img2.imgtn.bdimg.com/it/u=1561660534, 130168102, fm=26, gp=0. jpg # 39;
}，
{
标题:& # 39;案例名称& # 39;,
url: & # 39; http://img3.imgtn.bdimg.com/it/u=1417732605, 3777474040, fm=26, gp=0. jpg # 39;
｝
]
｝
}) 感谢各位的阅读!看完上述内容,你们对CSS3如何实现微信小程序瀑布流布局大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
