五种css的方式实现瀑布流布局效果
代码语言:html
所属分类:瀑布流
代码描述:五种css的方式实现瀑布流布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* --- Masonry --- */ [value="masonry"]:checked ~ main { display: grid; grid-template-rows: masonry; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; } /* --- Grid --- */ [value="grid"]:checked ~ main { display: grid; grid-template-rows: auto; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; } /* --- Multicolumn --- */ [value="multicolumn"]:checked ~ main { display: block; columns: 12rem; gap: 1rem; } [value="multicolumn"]:checked ~ main figure { margin-bottom: 1rem; break-inside: avoid; } /* --- Flexbox, row direction --- */ [value="flexbox"]:checked ~ main { display: flex; flex-wrap: wrap; gap: 1rem; } [value="flexbox"]:checked ~ main figure { flex: 1 1 12rem; } /* --- Flexbox, column direction --- */ [value="flexbox2"]:checked ~ main { display: flex; flex-wrap: wrap; flex-direction: column; max-height: 200vh; justify-content: start; gap: 1rem; } [value="flexbox2"]:checked ~ main figure { width: 100%; max-width: 16rem; } /* --- The rest of the styling --- */ * { box-sizing: border-box; } body { font-family: avenir, roboto, helvetica, sans-serif; margin: 2rem calc(2vw + 2rem); } main { margin: 2rem 0; } img { width: 100%; display: block; border-radius: 0 0 1rem 1rem; } figure { margin: 0; } figcaption { padding: 0.5rem 1rem 0.4rem; background: #ddd; color: #333; border-radius: 1rem 1rem 0 0; text-align: end; } h1 { margin: 0; } h2 { margin: 0; } h3 { margin: 0.5rem 0 0; font-size: 1rem; } aside { margin: 6rem 0; max-width: 80ch; padding: 2rem 2rem 1rem; border: 1px solid #000; } p { margin: 1rem 0; color: #444; font-weight: 400; } code { font-size: 1.07rem; color: #d45b2c; } input { margin: 0; } label { margin: 0 1.1rem 0 0.1rem; } </style> </head> <body translate="no"> <h1>css瀑布流布局多种方式对比</h1> <h3>切换模式:</h3> <input type="radio" name="display" value="masonry" id="masonry" checked> <label for="masonry">Masonry (Firefox Nightly only, <a href="#note">pref on</a>)</label><br> <input type="radio" name="display" value="grid" id="grid"> <label for="grid">Grid 1 (also the fallback)</label><br> <input type="radio" name="display" value="multicolumn" id="multicolumn"> <label for="multicolumn">Multicolumn</label><br> <input type="radio" name="display" value="flexbox" id="flexbox"> <label for="flexbox">Flexbox (row)</label><br> <input type="radio" name="display" value="flexbox2" id="flexbox2"> <label for="flexbox2">Flexbox (column)</label> <p>Be sure to <a href="#note">read the note</a> about this demo. Also, I made <a href="https://codepen.io/jensimmons/full/vYNeRZw" target="_blank">another demo</a> that shows off what Masonry in CSS Grid can do — far beyond the JS libraries of today.</p> <main> <figure><figcaption>1</figcaption><img src="https://images.unsplash.com/photo-1587383378486-83d683d9d02d?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></figure> <figure><figcaption>2</figcaption><img src="https://images.unsplash.com/photo-1588395856595-235a6a1ccca8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></figure> <figure><figcaption>3</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/photo-1587825027984-c4476461c8f9.jpg"></figure> <figure><figcaption>4</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/photo-1588503391289-5f7b28258022.jpg"></figure> <figure><figcaption>5</figcaption><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/photo-1586603234056-2158d916b705.jpg"></figure> <figure><figcaption>6</figcaption><img src="https://images.unsplash.com/photo-1587462829651-7fd0208d766e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></figure> <figure><figcaption>7</figcaption><img src="https://images.unsplash.com/photo-1585652505968-6266ecf26133?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></figure> <figure><figcaption>8</figcaption><img src="https://images.unsplash.com/photo-1586450463118-8d0cddab713f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></figure> <figure><figcaption>9</figcaption><img src="https://images.unsplash.com/photo-1587993988198-a3d05e119eb0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ"></figure> <figure><figcaption>10</figcaption><img src="https://images.unsplash.com/photo-1587750059642-d55dfc265acd?ixlib=rb-1.2.1&q=80&fm=jpg&cro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0