北京市建设教育协会网站,网站建设域名跳转博客,wordpress 授权登录页面,多合一网站源码目前的纯 CSS 布局, 是没办法实现比较完美的瀑布流布局的. 参考: CSS总结:瀑布流布局 - 黑白程序员 我使用 JS CSS, 并且自动布局实现了较为简单, 观赏性好的瀑布流布局.
代码
HTML:
!DOCTYPE html
html langen
headlink rel CSS, 并且自动布局实现了较为简单, 观赏性好的瀑布流布局.
代码
HTML:
!DOCTYPE html
html langen
headlink relstylesheet hrefcss/style.css
/head
bodybutton onclickadd_new()add/buttonbutton onclickstart_loop()start loop/buttonbutton onclickstop_loop()stop loop/button!--瀑布流容器--div idmasonry!--瀑布流列--div classmasonry-column-containerdiv classmasonry-column/div/divdiv classmasonry-column-containerdiv classmasonry-column/div/divdiv classmasonry-column-containerdiv classmasonry-column/div/divdiv classmasonry-column-containerdiv classmasonry-column/div/divdiv classmasonry-column-containerdiv classmasonry-column/div/divdiv classmasonry-column-containerdiv classmasonry-column/div/divdiv classmasonry-column-containerdiv classmasonry-column/div/div/divscript// 包装一个简单的随机数function random(start, end) {return Math.random() * (end - start) start;}// 在瀑布流中添加一个元素function add_new() {let masonry document.getElementById(masonry);let columns masonry.querySelectorAll(.masonry-column);let minHeightColumn columns[0];// 拿到高度最低的列columns.forEach(ele {if (ele.scrollHeight minHeightColumn.scrollHeight) {minHeightColumn ele;}});// 创建一个新元素 (设置高度, 背景颜色)let new_item document.createElement(div);new_item.classList.add(item);new_item.style.height ${Math.random() * 200 70}px;new_item.style.backgroundColor rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})// 在高度最低的列中添加元素minHeightColumn.appendChild(new_item);}var masonry_loop;function start_loop() {masonry_loop setInterval(add_new, 50);}function stop_loop() {clearInterval(masonry_loop);}/script
/body
/htmlCSS:
/* 瀑布流容器 */
#masonry {margin: 0 auto;width: 80vw; /* 居中 */display: grid; /* 网格布局 */grid-template-columns: repeat(7, 1fr); /* 总共 7 列 */gap: 10px; /* 间距 10px */
}/* 指定列是相对位置 (其中的元素可以相对列来定位) */
#masonry .masonry-column {position: relative;
}/* 限制内容的宽度占满列, 加上边距, 圆角 */
#masonry .item {width: 100%;margin-top: 10px;border-radius: 1em;
}在 CodePen 上查看: Simple Masonry
