画廊照片 javascript

在网页设计中，画廊照片是一个常见的元素。通过javascript实现画廊照片的效果，可以让网页更为动态和吸引人。本文介绍如何使用javascript实现画廊照片。

准备工作

我们需要准备一些基础的技术：HTML, CSS, JavaScript。在这里，我们使用Bootstrap来构建网页，并使用jQuery来编写JavaScript代码。

HTML代码

HTML代码如下，使用了Bootstrap的网格系统来布局，每个照片使用了一个Bootstrap的卡片组件。需要注意的是，我们在每个卡片上添加了data-category和data-caption属性，用于后续的筛选和显示照片详情。

<div class="container">
  <div class="row mt-5">
    <div class="col-md-4 card" data-category="portrait" data-caption="Portrait One">
            <img class="card-img-top" src="img/portrait1.jpg">
    </div>
    <div class="col-md-4 card" data-category="landscape" data-caption="Landscape One">
            <img class="card-img-top" src="img/landscape1.jpg">
    </div>
    <div class="col-md-4 card" data-category="nature" data-caption="Nature One">
            <img class="card-img-top" src="img/nature1.jpg">
    </div>
    <div class="col-md-4 card" data-category="landscape" data-caption="Landscape Two">
            <img class="card-img-top" src="img/landscape2.jpg">
    </div>
    <div class="col-md-4 card" data-category="nature" data-caption="Nature Two">
            <img class="card-img-top" src="img/nature2.jpg">
    </div>
    <div class="col-md-4 card" data-category="portrait" data-caption="Portrait Two">
            <img class="card-img-top" src="img/portrait2.jpg">
    </div>
  </div>
</div>

CSS代码

CSS代码如下，设置卡片组件的最小高度和居中样式。

.card {
  min-height: 400px;
  text-align: center;
  padding-top: 30px;
  border: none;
}

JavaScript代码

JavaScript代码如下，实现了筛选照片、显示照片详情的功能。其中，$()是jQuery选择器，可以选择网页中的HTML元素；click()是jQuery事件，当元素被点击时触发；fadeIn()是jQuery效果，实现渐显效果。

$(document).ready(function() {
  // 筛选照片
  $('.category').click(function() {
      var category = $(this).attr('id');
      $('.card').each(function() {
          if($(this).data('category') == category || category == 'all') {
              $(this).fadeIn('slow');
          } else {
              $(this).fadeOut('slow');
          }
      });
  });
  // 显示照片详情
  $('.card').click(function() {
      var caption = $(this).data('caption');
      alert(caption);
  });
});

结语

通过上述代码，我们可以实现一个简单的画廊照片效果，可以优化和扩展该代码来适应不同的需求。需要注意的是，代码的可读性和可维护性是非常重要的，应遵循良好的编码规范和注释规范。