집 > 기사 > 웹 프론트엔드 > 폭포 흐름 레이아웃을 구현하는 두 가지 방법

폭포 흐름 레이아웃을 구현하는 두 가지 방법

php中世界最好的语言원래의: 2018-02-23 09:52:274058검색

폭포 흐름 레이아웃은 과거에 매우 인기가 있었고 현재는 상대적으로 일반적인 레이아웃입니다.

이러한 고르지 않은 다중 열 레이아웃은 각 요소의 너비가 동일하고 높이가 동일하지 않다는 사실에 중점을 둡니다.

페이지가 스크롤됨에 따라 각 열의 하단에 데이터 블록이 연속적으로 로드됩니다. 이론적으로는 페이지를 아름답게 만들지 않고도 무한히 로드할 수 있습니다.

Pinterest와 Huaban.com은 상대적으로 성숙합니다. 폭포 흐름 레이아웃을 사용하는 웹사이트 <를 사용합니다. ;div id="main"> 컨테이너의 각 데이터 블록은

기본 레이아웃으로 .box를 사용하고 .wrapper는 스타일과 실제 콘텐츠를 나타냅니다.

CSS 스타일: 폭포 흐름 레이아웃을 구현하는 두 가지 방법

<div id="main">
  ...  <div class="box">
    <div class="wrapper">
      <div class="pic"><img  src="" / alt="폭포 흐름 레이아웃을 구현하는 두 가지 방법" ></div>
      <div class="text">简单介绍</div>
    </div>
  </div>
  ...</div>

패딩 시각적 공간을 남기기 위해 .box에 설정됩니다. Spacingmargin을 사용하지 않는 이유는 js가 나중에 요소의 offsetWidth 및 offsetHeight를 얻는 데 사용될 것이기 때문입니다

그리고 이 두 속성 값은 여백을 계산하지 않습니다.

JavaScript:

* {margin: 0; padding: 0;}html, body {width: 100%; height: 100%; background-color: #EDEDED;}#main {
  position: relative;
  width: 1280px; /*限定父容器的宽度*/
  margin: 0 auto;
}.box {
  position: absolute;
  padding: 7px; /*不建议使用 margin*/
  box-sizing: border-box;
  width: 256px; /*限定数据块的宽度*/}.wrapper {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}.pic {
  font-size: 0; /*消除行内元素的间隙*/}.pic img {
  width: 100%;
  height: auto;
}.text {
  color: #999;
  background: #FAFAFA;
  font-size: 14px;
  padding-top: 5px;
}

이 솔루션은 처음에 제공되었습니다. .box는 위치: 절대;

페이지가 열릴 때 페이지 성능이 좋지 않으면 모든 데이터 블록이 함께 쌓일 수 있습니다

You .box의 position:absolute를 float:left로 대체할 수 있습니다. 그런 다음 js에서 위치 지정 스타일을 추가할 때 position:absolute를 추가하면 시각적 효과가 향상됩니다

2 폭포 흐름을 구현하는 순수 CSS3

CSS3에는 새로운 속성이 있습니다. 열 개수를 지정하여 지정할 수 있는 열, 열 수를 지정하여 브라우저 적응형 레이아웃을 만들 수 있습니다

위의 JavaScript 부분을 삭제하고 #main 및 .box를 수정하세요.

window.onload = function() {
  waterFall(&#39;main&#39;, &#39;box&#39;)
}
function waterFall(main, box) {  var main = document.getElementById(main);  var boxs = main.getElementsByClassName(box);  var boxWidth = boxs[0].offsetWidth; //获取每个数据块的宽度
  var mainWidh = main.offsetWidth; //获取主容器的宽度
  var cols = Math.floor(mainWidh / boxWidth); //计算列数
  
  var heightArr = []; //定义一个存放 top 值的数组
  for(var i = 0; i < boxs.length; i++) {    var boxHeight = boxs[i].offsetHeight;      if(i < cols) { //第一行        heightArr.push(boxs[i].offsetHeight);
        boxs[i].style.top = &#39;0px&#39;; 
        boxs[i].style.left = i * boxWidth +&#39;px&#39;;
      } else {        //求出最矮盒子的高度
        var minBoxHeight = Math.min.apply(this, heightArr); 
        //求出最矮盒子的索引 
        var minBoxIndex = getIndex(minBoxHeight, heightArr); 
        boxs[i].style.top = minBoxHeight + &#39;px&#39;; //顶部间距即最矮盒子的高度
        boxs[i].style.left = minBoxIndex * boxWidth +&#39;px&#39;; 
        //关键:更新最矮盒子的高度
        heightArr[minBoxIndex] += boxHeight;
      } 
  }
}
function getIndex(val, arr) {  for(var i in arr) {    if(val == arr[i]) {      return i;
    }
  }
}

하지만 여기서 달성한 폭포 흐름은 다음과 같습니다. way는 실제로 세로로 배열되어 있지만 이전 클래식 구성표는 가로로 배열되어 있습니다

CSS3의 새로운 속성으로 IE10 이상의 브라우저에서만 열을 지원합니다

이 사례를 읽고 나면 이 방법을 마스터하셨으리라 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!