JQuery 小练习(实例代码)

我会详细讲解一下 "JQuery 小练习(实例代码)" 的完整攻略。下面是整个过程的步骤：

1. 准备工作

首先我们需要准备 JQuery 库，可以从 JQuery 官网 下载最新版的 JQuery。下载后，将其引入到 HTML 页面中：

<script src="jquery.min.js"></script>

2. 练习一：jQuery 实现图片旋转

HTML 代码

<div class="rotateContainer">
  <img src="imgs/1.jpg" alt="" class="rotateImg">
</div>

CSS 代码

.rotateContainer {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.rotateImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform .5s;
}
.rotateImg:hover {
  transform: rotate(360deg);
}

jQuery 代码

$(function() {
  $('.rotateContainer').hover(
    function() {
      $(this).find('.rotateImg').addClass('rotate');
    },
    function() {
      $(this).find('.rotateImg').removeClass('rotate');
    }
  );
});

功能说明

使用鼠标悬停时，实现图片旋转。

3. 练习二：使用 jQuery 实现图片瀑布流布局

HTML 代码

<div id="waterfall">
  <div class="waterfall-item">
    <img src="imgs/1.jpg" alt="">
  </div>
  <div class="waterfall-item">
    <img src="imgs/2.jpg" alt="">
  </div>
  <div class="waterfall-item">
    <img src="imgs/3.jpg" alt="">
  </div>
  <div class="waterfall-item">
    <img src="imgs/4.jpg" alt="">
  </div>
  <div class="waterfall-item">
    <img src="imgs/5.jpg" alt="">
  </div>
  <div class="waterfall-item">
    <img src="imgs/6.jpg" alt="">
  </div>
</div>

CSS 代码

#waterfall {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}
.waterfall-item {
  width: 300px;
  margin: 10px;
  float: left;
}
.waterfall-item img {
  width: 100%;
  height: auto;
}

jQuery 代码

$(function() {
  // 首先设置每一列的宽度和高度
  var colWidth = $('.waterfall-item').outerWidth(true);
  var colCount = Math.floor($('#waterfall').outerWidth(true) / colWidth);
  var colHeights = [];
  for (var i = 0; i < colCount; i++) {
    colHeights.push(0);
    $('#waterfall').append('<div class="waterfall-col"></div>');
  }
  $('.waterfall-col').css({
    width: colWidth,
    float: 'left'
  });

  // 每次添加图片时，找到高度最短的列，然后在该列下面添加图片
  function addItem(item) {
    // 找到高度最短的列
    var minHeightCol = colHeights.indexOf(Math.min.apply(null, colHeights));
    // 在该列下面添加图片
    $('.waterfall-col').eq(minHeightCol).append(item);
    // 更新列高度
    colHeights[minHeightCol] += item.outerHeight(true);
  }

  // 找到所有图片，然后添加到瀑布流布局中
  $('#waterfall img').each(function() {
    addItem($(this).parent());
  });

  // 当窗口大小改变时重新布局图片
  $(window).resize(function() {
    colCount = Math.floor($('#waterfall').outerWidth(true) / colWidth);
    $('.waterfall-col').remove();
    colHeights = [];
    for (var i = 0; i < colCount; i++) {
      colHeights.push(0);
      $('#waterfall').append('<div class="waterfall-col"></div>');
    }
    $('.waterfall-col').css({
      width: colWidth,
      float: "left"
    });  
    $('#waterfall img').each(function() {
      addItem($(this).parent());
    });   
  });
});

功能说明

通过 jQuery 实现图片瀑布流布局。其中，列数会根据窗口大小动态调整，从而保证瀑布流布局的效果。