집 > 기사 > 웹 프론트엔드 > jQuery는 단순히 그림 폭포 흐름을 구현합니다.

jQuery는 단순히 그림 폭포 흐름을 구현합니다.

小云云원래의: 2018-01-22 13:49:581765검색

이번 글에서는 주로 jQuery 이미지 워터폴 흐름의 간단한 구현 코드를 자세히 소개했습니다. 관심 있는 친구들이 참고하면 좋겠습니다. 모든 사람.

참고: 이 기사는 각 그림의 실제 크기를 아는 것을 기반으로 합니다.
특징: 적응형 열 번호, 고정 그림 너비

알려진 버그:

이 경우 5개의 그림이 루프로 표시되는 것과 같습니다. 5개 열만 있을 경우 문제가 발생합니다. 스타일을 지정할 때 순서를 따르지 말고 가장 높은 값의 열에 먼저 그림을 배치하는 것이 좋습니다.

1. 준비

<p id="main">
  <p class="img-item"><img src="images/img1.png" data-size="398*636" alt=""></p>
  <p class="img-item"><img src="images/img2.png" data-size="560*381" alt=""></p>
  <p class="img-item"><img src="images/img3.png" data-size="338*537" alt=""></p>
  <p class="img-item"><img src="images/img4.png" data-size="599*507" alt=""></p>
  <p class="img-item"><img src="images/img5.png" data-size="532*535" alt=""></p>
</p>

새 HTML 파일을 만든 다음 #main의 다음 레이어 코드를 여러 번 복사하면 결국 폭포 흐름의 효과를 더 많이 반영할 수 있습니다.

2 기본 CSS

#main{
  width: 90%;
  background-color: #dab;
  text-align: center;
  margin:0 auto;
  position: relative;
}
img{
  width: 100%;
  box-sizing:border-box;
  box-shadow: 2px 0 3px #ddd,0 2px 3px #ddd;
}
.img-item{
  position: absolute;
  padding: 3px;
  box-sizing:border-box;
  height: auto;
  display: inline-block;
}

2. 시작

1. 문장

//获取图片列表包裹层
var $main = $(&#39;#main&#39;);
//获取窗口,用于自适应
var $mainWidth = $(window).width();
//定义图片宽度
var imgWidth = 150;
//可显示的列数
var columnNumber = Math.floor($mainWidth/imgWidth);
//存储top信息
var data = [];
//初始化,比如当前可以显示6列,那么这里就初始化6个空间
for (var i = 0; i < columnNumber; i++) {
  data[i] = 0;
}

2. 본체

//
var wall = function() {
  //获取相册图片集合
  var $imgs = $(&#39;.img-item&#39;);
  //遍历图片集合修改top值
  $.each($imgs, function(index, el) {
    //计算当前列数
    var currColumn = index % columnNumber;

    //获取需要显示的高度
    var size = $(&#39;img&#39;, el).data(&#39;size&#39;);
    var height = imgWidth / parseInt(size.split(&#39;*&#39;)[0]) * parseInt(size.split(&#39;*&#39;)[1])

    $(el).css({
      width: imgWidth,
      left: currColumn * imgWidth,
      top: data[currColumn]
    });

    //如果需要动画可以使用$(el).animate
    data[currColumn] += height;
    //本来这里只需要+=$(el).height()就可以解决,但是初始化时有些问题未解决
  });
};

3. 창 크기 변경 이벤트

$(window).resize(function(event) {
   //重置窗口宽度
   $mainWidth = $(window).width();
   //重置可显示的列数
   columnNumber = Math.floor($mainWidth / imgWidth);
   //动态修改#main相册包裹层的宽度,使整个相册看起来一直居中
   $main.css({
     width: imgWidth * columnNumber
   });
   //重置top信息
   for (var i = 0; i < columnNumber; i++) {
     data[i] = 0;
   }
   wall();
 });

jQuery는 단순히 그림 폭포 흐름을 구현합니다.

관련 기사