当前位置：首页 > jquery

jquery 照片墙

2026-03-16 23:15:32jquery

jquery 照片墙

jQuery 照片墙实现方法

基础HTML结构

<div class="photo-wall">
  <div class="photo-item">
    <img src="image1.jpg" alt="Photo 1">
  </div>
  <div class="photo-item">
    <img src="image2.jpg" alt="Photo 2">
  </div>
  <!-- 更多图片项 -->
</div>

CSS样式设置

.photo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  padding: 20px;
}

.photo-item {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-item:hover {
  transform: scale(1.05);
}

jQuery动态功能

$(document).ready(function() {
  // 图片点击放大效果
  $('.photo-item').click(function() {
    $(this).toggleClass('zoomed');
  });

  // 随机排列图片
  $('.photo-wall').each(function() {
    $(this).html($(this).children().sort(function() {
      return Math.random() - 0.5;
    }));
  });

  // 懒加载实现
  $("img.lazy").lazyload({
    effect: "fadeIn",
    threshold: 200
  });
});

高级功能扩展

// 无限滚动加载
$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    loadMorePhotos();
  }
});

function loadMorePhotos() {
  // AJAX加载更多图片
  $.ajax({
    url: 'load-more-photos.php',
    type: 'GET',
    success: function(data) {
      $('.photo-wall').append(data);
    }
  });
}

响应式调整

// 窗口大小改变时调整布局
$(window).resize(function() {
  const width = $(window).width();
  if(width < 768) {
    $('.photo-item').css({'width': '150px', 'height': '150px'});
  } else {
    $('.photo-item').css({'width': '200px', 'height': '200px'});
  }
});