jquery分类筛选动画瀑布流(jquery分类筛选动画瀑布流)

jquery分类筛选动画瀑布流(jquery分类筛选动画瀑布流)
jquery筛选 瀑布流 分类布局 动画瀑布流 jquery特效 jquery下载

以下是一个使用jQuery实现分类筛选、动画和瀑布流效果的示例代码：

HTML代码：

<div class="filter">
  <button class="btn active" data-filter="all">全部</button>
  <button class="btn" data-filter="category1">分类1</button>
  <button class="btn" data-filter="category2">分类2</button>
  <!-- 添加更多分类按钮 --></div><div class="grid">
  <div class="item category1">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="item category2">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <!-- 添加更多图片项 --></div>

CSS代码：

.grid {  display: flex;  flex-wrap: wrap;  margin: -10px;
}.item {  flex: 0 0 calc(33.33% - 20px);  margin: 10px;  overflow: hidden;  transition: all 0.3s ease-in-out;
}.item img {  width: 100%;  height: auto;
}.active {  background-color: #333;  color: #fff;
}.hide {  display: none;
}

jQuery代码：

$(document).ready(function() {
  $('.btn').click(function() {
    $('.btn').removeClass('active');
    $(this).addClass('active');    
    var filter = $(this).attr('data-filter');    
    if (filter === 'all') {
      $('.item').removeClass('hide');
    } else {
      $('.item').each(function() {        if (!$(this).hasClass(filter)) {
          $(this).addClass('hide');
        } else {
          $(this).removeClass('hide');
        }
      });
    }
    
    $('.grid').masonry('layout');
  });
  
  $('.grid').masonry({    itemSelector: '.item',    columnWidth: '.grid-sizer',    gutter: 10
  });
});

这段代码实现了一个分类筛选、动画和瀑布流效果的图片展示。当用户点击分类按钮时，只有属于该分类的图片项会显示，其他图片项会隐藏。同时，图片项会以瀑布流的方式布局，并且在窗口大小变化时进行自适应调整。

您可以根据需要修改分类按钮、图片项的样式和筛选逻辑来适应您的需求。

jquery分类筛选动画瀑布流，可自由变换布局排版的jquery特效，HTML5+CSS3实现注册登录窗体，CSS3实现页面过渡效果，