찾다

집 >웹 프론트엔드 >부트스트랩 튜토리얼 >실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

青灯夜游
青灯夜游앞으로
2021-12-14 19:16:253552검색

이 기사에서는 Bootstrap의 실제 응용 프로그램을 공유하고 Bootstrap을 사용하여 폭포 흐름 레이아웃을 구현하는 방법을 단계별로 소개합니다. 모든 사람에게 도움이 되기를 바랍니다.

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

Bootstrap의 기본에 대한 튜토리얼은 이미 온라인에 많이 있습니다. 실제로 Bootstrap 중국어 웹사이트(bootcss.com)에 있는 문서에는 매우 자세하게 작성되어 있지만 실제 사례는 많지 않습니다. 여기서는 현재 인기 있는 웹 페이지 레이아웃을 가이드로 사용하고 이를 완성하기 위해 Bootstrap의 스타일을 사용합니다. 매번 사건과 관련된 지식 포인트만을 강의하며, 이해도를 높이기 위해 배우면서 연습하게 됩니다. 이 사례를 연습하려면 HTML/CSS에 대한 기본 지식이 필요합니다. [관련 추천: "부트스트랩 튜토리얼"]

1. 사례 소개

폭포 흐름은 최근 몇 년간 인기를 끌고 있는 웹 페이지 레이아웃입니다. 시각적 성능이 균일하지 않은 다중 열 레이아웃입니다. 폭포 흐름 레이아웃.

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

2. 부트스트랩 관련 지식 포인트

2.1 부트스트랩 구성

2.1.1 먼저 부트스트랩 공식 홈페이지(bootcss.com)에 접속하여 "프로덕션 환경용 부트스트랩"을 다운로드 받으세요.

2.1.2 CSS 폴더의 압축된 bootstrap.min.css를 태그에 추가하세요. 标签内引入 CSS 文件夹内的经过压缩的 bootstrap.min.css。

2.1.3 因为 Bootstrap 的 JS 插件是依赖 jQuery 的，所以想用他的 JS 插件必须先引入 jQuery ，然后再引入 JS 文件夹下的 bootstrap.min.js。

<!--BootstrapCSS文件，放在<head>内-->
<link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery文件，引入BootstrapJS插件前必需引入-->
<script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--BootstrapJS文件，一般放在底部-->
<script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--让IE使用最新的渲染模式，支持CSS3-->
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<!--如果IE版本低于IE9，使浏览器支持HTML5和CSS3-->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

2.2 栅格系统

官方解释：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类。

简单来说，就是 Bootstrap 为了快速布局从外到内写好了三类样式：

  • 外层的固定宽度 .container 或 100% 宽度 .container-fluid 样式；
  • 行 .row 样式，必须包含在 .container 或 .container-fluid 中；
  • 列 .col-md-*（* 可以是 1 到 12，此处代表中等屏幕按此标准显示，.col-md-1 占 .row 的 1/12，.col-md-12 占 .row 的 12/12）或列偏移 .col-md-offset-*（* 可以是 1 到 12），包含在 .row 容器中，从而快速进行栅格布局。

.col-md-* 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
    </div>
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-3">3/12</div>
        <div class="col-md-4">4/12</div>
        <div class="col-md-4">4/12</div>
    </div>
    <div class="row">
        <div class="col-md-6">6/12</div>
        <div class="col-md-6">6/12</div>
    </div>
</div>

.col-md-* 效果图：

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

使用列偏移 .col-md-offset-* 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <!--这里向右偏移4/12-->
        <div class="col-md-1 col-md-offset-4">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-1">3/12</div>
        <div class="col-md-4 col-md-offset-4">4/12</div>
    </div>
    <div class="row">
        <div class="col-md-4  col-md-offset-4">6/12</div>
    </div>
</div>

.col-md-offset-* 效果图：

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

另外需要注意的是，不管 .col-md-* 和 .col-md-offset-* 怎么搭配使用都要保证 * 总和不超过 12，不然会发生断行现象。

2.3 缩略图

缩略图最常出现的是在产品的展示页，最常见的比如一些购物网站的商品展示。

缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 <img alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" > 标签包在带 .thumbnail 样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .caption 的容器。

.thumbnail 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="img/1.jpg" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                <div class="caption">
                    <h4>标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="img/1.jpg" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                <div class="caption">
                    <h4>标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="img/1.jpg" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                <div class="caption">
                    <h4>标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
    </div>
</div>

.thumbnail 效果图：

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

2.4 响应式图片

为了让图片适应容器的大小，可以为图片添加 .img-responsive 样式。

.img-responsive 示例：

<img src="img/1.jpg" class="img-responsive" alt="响应式图片">

另外还可以添加 img-rounded/img-circle/img-thumbnail

2.1.3 Bootstrap의 JS 플러그인은 jQuery를 기반으로 하기 때문에 JS 플러그인을 사용하려면 먼저 jQuery를 도입한 후 bootstrap을 도입해야 합니다. JS 폴더 .min.js에 있습니다. 
<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-rounded" alt="圆角">
        </div>
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-circle" alt="圆形">
        </div>
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-thumbnail" alt="缩略图">
        </div>
    </div>
</div>

2.2 그리드 시스템

공식 설명: Bootstrap은 (뷰포트) 크기가 증가함에 따라 화면이나 뷰포트에 따라 변경되는 반응형 모바일 우선 유동 그리드 시스템을 제공합니다. , 시스템은 자동으로 최대 12개의 열로 나눕니다. 여기에는 사용하기 쉬운 사전 정의된 클래스가 포함되어 있습니다.

간단히 말하면 Bootstrap은 빠른 레이아웃을 위해 외부에서 내부로 세 가지 유형의 스타일을 작성했습니다.

  • 외부 레이어의 고정 너비 .container 또는 100% 너비 .container-fluid 스타일,
  • 행 .row 스타일, .container에 포함되어야 함 또는 .container-fluid;
  • 열 .col-md-*(*는 1~12일 수 있음) 중간 화면을 나타냅니다. 이 표준 디스플레이에 따르면 .col-md-1은 .row의 1/12을 차지하고 .col-md-12 code>는 <code> .row의 12/12를 나타냄) 또는 열 오프셋 .col-md-offset-*(*는 1~12일 수 있음) ), 빠른 그리드 레이아웃을 위해 .row 컨테이너에 포함되어 있습니다.
실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함).col-md-* 예: 
<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
        <!--这里放图片-->
        </div>
    </div>
</section>

.col-md-* 렌더링:

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

열 오프셋 사용.col- md-offset-* 예: 

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--图片开始-->
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/1.jpg" class="img-responsive img-rounded" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/2.jpg" class="img-responsive img-rounded" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/3.jpg" class="img-responsive img-rounded" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

.col-md-offset-* 렌더링:

🎜실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)🎜🎜또한 .col-md-*와 <code>.col-md-offset-*를 어떻게 함께 사용하든 *의 합이 12를 초과하지 않도록 주의하세요. 그렇지 않으면 줄 바꿈이 발생합니다. . 🎜

2.3 썸네일🎜🎜썸네일은 일부 쇼핑 웹사이트의 제품 디스플레이와 같은 제품 디스플레이 페이지에 가장 자주 표시됩니다. 🎜🎜썸네일은 위에 소개된 그리드 시스템과 함께 사용해야 합니다. 사용 방법은 .thumbnail을 사용하여 컨테이너의 <img alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" > 태그를 래핑하는 것입니다. 스타일. 텍스트 설명을 추가하려면 내부에 .caption 스타일이 있는 컨테이너를 추가하면 됩니다. 🎜🎜.thumbnail 예: 🎜
<!--代码部分-->
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="container">
        <!--图片开始-->
        <div class="col-md-4">
            <div class="thumbnail">
🎜.thumbnail 렌더링: 🎜🎜실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)🎜

2.4 반응형 이미지🎜🎜이미지를 상황에 맞게 조정하려면 컨테이너 크기에 따라 이미지에 .img-반응형 스타일을 추가할 수 있습니다. 🎜🎜.img-반응형 예: 🎜
<!--代码部分-->
#container{
    -webkit-column-width:354px; /*Safari and Chrome*/
    -moz-column-width:354px; /*Firefox*/
    -o-column-width:354px; /*Opera*/
    -ms-column-width:354px; /*IE*/
    column-width:354px;
}
#container>div{
    width:354px; /*宽度根据实际情况调节，应与上面一致*/
    overflow:auto; /*防止内容溢出导致布局错位*/
}
🎜 img-rounded/img-circle/img-thumbnail을 추가할 수도 있습니다. 이미지를 둥근 모서리/원/썸네일 모양으로 만듭니다. 🎜🎜그림 모양 변경 예:🎜
<!--代码部分-->
body{
    body{
    font-family:"微软雅黑";
    --img-width:354px; /*两根连词线"--"加变量名"img-width"声明变量*/
}
#container{
    -webkit-column-width:var(--img-width); /*用"var(--变量名)"使用变量*/
    -moz-column-width:var(--img-width);
    -o-column-width:var(--img-width);
    -ms-column-width:var(--img-width);
    column-width:var(--img-width);
}
/*另：var()里面可以放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则使用第二个参数"200px"*/
#container>div{
    width:var(--img-width);
    overflow:auto;
}
🎜그림 모양 렌더링 변경:🎜🎜🎜🎜🎜3. 폭포 흐름 레이아웃 연습🎜🎜3.1 그림 정렬🎜🎜위 내용을 읽은 후 실제 연습을 시작하겠습니다. 먼저 그리드 구조를 사용하여 사진을 위한 영역을 만듭니다. 여기에서는 왼쪽과 오른쪽에 공간의 1/12을 남겨둡니다. 🎜
//页面加载完之后再加载瀑布流
window.onload = function(){
    //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
    loadWaterfall(&#39;container&#39;,&#39;col-md-4&#39;);
}

//加载瀑布流函数//思路来自Amy老师
function loadWaterfall(boxID,thumbnailClass){
    //获取装缩略图外部的盒子
    var box = document.getElementById(boxID);
    //获取装缩略图的数组
    var thumbnail = box.getElementsByClassName(thumbnailClass);
    //获取每个缩略图的宽度
    var thumbnailWidth = thumbnail[0].offsetWidth;
    //计算盒子内每行可以排列几个缩略图
    var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
    //创建放每次整理好的高度数组
    var thumbnailHeightArr = [];
    for(var i = 0; i < thumbnail.length; i++){
        //获取第一行高度数组
        if(i < colCount){
            thumbnailHeightArr.push(thumbnail[i].offsetHeight);
        }else{
            //获取之前最小高度
            var minHeight = Math.min.apply(null,thumbnailHeightArr);
            //第一行最小高度索引
            var minIndex = thumbnailHeightArr.indexOf(minHeight);
            //将此缩略图放在上面那行最小高度下面
            thumbnail[i].style.position = &#39;absolute&#39;;
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + &#39;px&#39;;
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + &#39;px&#39;;
            //更新最小高度
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}
🎜렌더링:🎜

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的样式 .img-responsive 和圆角样式 .img-rounded 修饰下。

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--图片开始-->
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/1.jpg" class="img-responsive img-rounded" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/2.jpg" class="img-responsive img-rounded" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img  src="img/3.jpg" class="img-responsive img-rounded" alt="실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)" >
                    </a>
                    <div class="caption">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

效果图：

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

3.2 实现瀑布流

到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。

官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。

给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。<p>首先我们给缩略图外部的容器加一个 <code>id="container"。

<!--代码部分-->
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="container">
        <!--图片开始-->
        <div class="col-md-4">
            <div class="thumbnail">

然后为这个 id 加上 column-width 样式。

<!--代码部分-->
#container{
    -webkit-column-width:354px; /*Safari and Chrome*/
    -moz-column-width:354px; /*Firefox*/
    -o-column-width:354px; /*Opera*/
    -ms-column-width:354px; /*IE*/
    column-width:354px;
}
#container>div{
    width:354px; /*宽度根据实际情况调节，应与上面一致*/
    overflow:auto; /*防止内容溢出导致布局错位*/
}

效果图：

실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)

因为现在主流浏览器（Chrome/Firefox/Opera/Safari）都已经支持了 CSS 变量，为了方便调试和维护，上面的 CSS 代码也可以这么写。

<!--代码部分-->
body{
    body{
    font-family:"微软雅黑";
    --img-width:354px; /*两根连词线"--"加变量名"img-width"声明变量*/
}
#container{
    -webkit-column-width:var(--img-width); /*用"var(--变量名)"使用变量*/
    -moz-column-width:var(--img-width);
    -o-column-width:var(--img-width);
    -ms-column-width:var(--img-width);
    column-width:var(--img-width);
}
/*另：var()里面可以放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则使用第二个参数"200px"*/
#container>div{
    width:var(--img-width);
    overflow:auto;
}

到这里我们的 Bootstrap 瀑布流布局就完成了，一步步完成下来还是很简单的

演示地址：https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html

源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall

3.3 扩展

除了用 CSS3 实现瀑布流之外，还可以用 JavaScript 来实现这个效果，参考代码如下。

//页面加载完之后再加载瀑布流
window.onload = function(){
    //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
    loadWaterfall(&#39;container&#39;,&#39;col-md-4&#39;);
}

//加载瀑布流函数//思路来自Amy老师
function loadWaterfall(boxID,thumbnailClass){
    //获取装缩略图外部的盒子
    var box = document.getElementById(boxID);
    //获取装缩略图的数组
    var thumbnail = box.getElementsByClassName(thumbnailClass);
    //获取每个缩略图的宽度
    var thumbnailWidth = thumbnail[0].offsetWidth;
    //计算盒子内每行可以排列几个缩略图
    var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
    //创建放每次整理好的高度数组
    var thumbnailHeightArr = [];
    for(var i = 0; i < thumbnail.length; i++){
        //获取第一行高度数组
        if(i < colCount){
            thumbnailHeightArr.push(thumbnail[i].offsetHeight);
        }else{
            //获取之前最小高度
            var minHeight = Math.min.apply(null,thumbnailHeightArr);
            //第一行最小高度索引
            var minIndex = thumbnailHeightArr.indexOf(minHeight);
            //将此缩略图放在上面那行最小高度下面
            thumbnail[i].style.position = &#39;absolute&#39;;
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + &#39;px&#39;;
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + &#39;px&#39;;
            //更新最小高度
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}

用 JavaScript 实现瀑布流最明显的一个好处就是对于 IE 的兼容性更好一些，因为 Windows7 捆绑安装 IE 浏览器的缘故，国内使用 IE 的群体非常庞大，这使得我们在制作网页时不得不考虑 IE 浏览器的兼容问题。

JavaScript 实现瀑布流参考源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript

四、总结

本文介绍了 Bootstrap 的基本配置、栅格系统、缩略图、响应式图片和部分 CSS3 样式，其中栅格系统因为可以实现响应式布局尤其重要。

作者后除

原文地址：https://blog.mazey.net/2399.html

（完）

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

위 내용은 실제 전투: 부트스트랩을 사용하여 폭포 흐름 레이아웃 구현(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript firefox jquery css chrome safari bootstrap css3 html .net JS 对象 viewport column github https
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)다음 기사：Django와 Bootstrap을 사용하여 계산기를 만드는 방법(실용)

관련 기사

더보기