CSS에서 폭포 흐름 레이아웃을 구현하는 방법

CSS로 폭포 흐름 레이아웃을 구현하는 방법: 1. 다중 열 다중 열 레이아웃을 사용합니다. 2. 이를 달성하려면 플렉스 레이아웃을 사용하세요. 외부 레이어를 행 레이아웃으로 설정한 다음 컨테이너를 설정하고 열 레이아웃으로 설정하면 됩니다. 열을 전체적으로 처리한 다음 열을 나누고 너비를 고정합니다. 칼럼.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

폭포 흐름의 레이아웃은 여전히 ​​매우 매력적입니다. 최근에 폭포 흐름을 구현하는 사례를 여기에 기록했습니다. 특히 플렉스 레이아웃에서 폭포 흐름을 구현하는 것이 여전히 다소 혼란스럽다고 느꼈지만 이제는 이해할 수 있습니다. 원리는 이렇습니다

1. 다중 열 다중 열 레이아웃은 폭포 흐름을 구현합니다

먼저 다중 열과 관련된 몇 가지 속성에 대해 간략하게 설명합니다

• column-count는 열 수를 설정합니다
• column-gap 열과 열 설정
• column-width 사이의 간격은 각 열의 너비를 설정합니다.

또한 다중 열 레이아웃, 페이지 매김 미디어 및 다중 지역 컨텍스트에서 예기치 않은 중단을 방지하기 위해 하위 컨테이너의 break-inside 설정과 결합됩니다.

break-inside属性值
  auto  指定既不强制也不禁止元素内的页/列中断。
  avoid  指定避免元素内的分页符。
  avoid-page  指定避免元素内的分页符。
  avoid-column 指定避免元素内的列中断。
  avoid-region  指定避免元素内的区域中断。

• 가로채는 부분은 직접 채울 수 있습니다

/* html文件 */
<!-- 使用multi-columns实现瀑布流 -->
<div id="root">
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/1.jpeg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/2.jpg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/3.jpg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/4.jpg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
    <div class="item">
        <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/5.jpeg"    alt=""/>
        <div class="userInfo">
            <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
            <span class="username">牵起你的左手护着你</span>
        </div>
    </div>
</div>

/* css样式 */
body {
    background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
     margin: 0 auto;
     width: 1200px;
     column-count: 5;
     column-width: 240px;
     column-gap: 20px;
}
/* 每一列图片包含层 */
.item {
     margin-bottom: 10px;
     /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
     break-inside: avoid;
     background: #fff;
}
.item:hover {
     box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
     width: 100%;
     vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
     padding: 5px 10px;
}
.avatar {
     vertical-align: middle;
     width: 30px;
     height: 30px;
     border-radius: 50%;
}
.username {
     margin-left: 5px;
     text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

2.flex 레이아웃은 폭포 흐름을 구현합니다

• 외부 레이어를 행 레이아웃으로 설정한 다음 컨테이너를 설정하고 다음으로 설정합니다. 열을 전체적으로 사용하고 열을 나누어 열의 너비를 고정하는 열 레이아웃

/* html文件（只截取两列布局）*/
<div id="root">
    <div class="itemContainer">
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/1.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/2.jpg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/3.jpg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/4.jpg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/5.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/6.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/7.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
    </div>
    <div class="itemContainer">
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/5.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/7.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/6.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/5.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/6.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
        <div class="item">
            <img class="itemImg lazy"  src="/static/imghw/default1.png"  data-src="../images/6.jpeg"    alt=""/>
            <div class="userInfo">
                <img class="avatar lazy"  src="/static/imghw/default1.png"  data-src="../images/gift.png"    alt=""/>
                <span class="username">牵起你的左手护着你</span>
            </div>
        </div>
    </div>
</div>

/* css文件 */
body{
   background: #e5e5e5;
}
#root{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 1200px;
}
.itemContainer{
    margin-right: 10px;
    flex-direction: column;
    width: 240px;
}
.item{
   margin-bottom: 10px;
   background: #fff;
}
.itemImg{
   width: 100%;
}
.userInfo {
   padding: 5px 10px;
}
.avatar {
   vertical-align: middle;
   width: 30px;
   height: 30px;
   border-radius: 50%;
}
.username {
   margin-left: 5px;
   text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}

• 연습 후에 순수 CSS로 구현한 폭포 흐름은 오직 한 열씩 배열해야 하므로 js를 사용하여 폭포 흐름을 구현하는 것이 일반적인 폭포 흐름

(동영상 공유 학습: css 동영상 튜토리얼)

에 더 가깝습니다.

위 내용은 CSS에서 폭포 흐름 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!