div+css横向瀑布流布局图片相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css横向瀑布流布局图片相册效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .masonry-rows { --row-height: 250px; --min-item-width: 200px; display: flex; flex-wrap: wrap; gap: 10px; > * { min-width: min(var(--min-item-width), 100%); height: var(--row-height); flex: auto; object-fit: cover; } } </style> </head> <body translate="no"> <div class="masonry-rows"> <img src="https://picsum.photos/581/378"> <img src="https://picsum.photos/467/450"> <img src="https://picsum.photos/439/376"> <img src="https://picsum.photos/235/333"> <img src="https://picsum.photos/392/442"> <img src="https://picsum.photos/505/369">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0