过滤器与图像载入网页按钮(Filter images with a button on page l

我竭力要弄清楚如何有过滤图像在页面加载时，不只是当用户点击使用Shufflejs在引导按钮。我想选择仅显示这些图像在页面加载时的“水果”按钮。目前，所有的图像显示在页面加载。我一直在使用“检查”，并使用“活跃”属性试过，但它只检查按钮，仍然显示所有图像。

我失去了一个简单的解决方案呢？

下面的代码：

 var Shuffle = window.Shuffle; var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), { itemSelector: '.image-item', sizer: '.my-sizer-element', buffer: 1, }); window.jQuery('input[name="shuffle-filter"]').on('change', function(evt) { var input = evt.currentTarget; if (input.checked) { myShuffle.filter(input.value); } });

 /* default styles so shuffle doesn't have to set them (it will if they're missing) */ .my-shuffle { position: relative; overflow: hidden; } /* Make vertical gutters the same as the horizontal ones */ .image-item { margin-bottom: 30px; } /* Ensure images take up the same space when they load */ /* https://vestride.github.io/Shuffle/images */ .aspect { position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; } .aspect__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .aspect--16x9 { padding-bottom: 56.25%; } .aspect--9x80 { padding-bottom: calc(112.5% + 30px); } .aspect--32x9 { padding-bottom: calc(28.125% - 8px); } .image-item img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }

 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="container mt-3"> <div class="row"> <div class="col"> <p class="mb-1">Filters:</p> </div> </div> <div class="row mb-3"> <div class="col"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-outline-primary"> <input type="radio" name="shuffle-filter" value="all" checked="checked"/>All </label> <label class="btn btn-outline-primary"> <input type="radio" name="shuffle-filter" value="nature"/>Nature </label> <label class="btn btn-outline-primary.active"> <input type="radio" name="shuffle-filter" value="fruit" checked/>Fruit </label> <label class="btn btn-outline-primary"> <input type="radio" name="shuffle-filter" value="architecture"/>Architecture </label> </div> </div> </div> <div class="row my-shuffle"> <figure class="image-item col-3" data-groups="[&quot;nature&quot;]"> <div class="aspect aspect--16x9"> <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt" /></div> </div> </figure> <figure class="image-item col-3" data-groups="[&quot;architecture&quot;]"> <div class="aspect aspect--16x9"> <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=7ab1744fe016fb39feb2972244246359" obj.alt="obj.alt" /></div> </div> </figure> <figure class="image-item col-3" data-groups="[&quot;nature&quot;,&quot;architecture&quot;]"> <div class="aspect aspect--9x80"> <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1416184008836-5486f3e2cf58?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=601&amp;h=676&amp;fit=crop&amp;s=5f1f1ffba05979d4248cc16d8eb82f0a" obj.alt="obj.alt" /></div> </div> </figure> <figure class="image-item col-3" data-groups="[&quot;fruit&quot;]"> <div class="aspect aspect--16x9"> <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=eda14f45e94e9024f854b1e06708c629" obj.alt="obj.alt" /></div> </div> </figure> <div class="col-1 my-sizer-element"></div> </div> </div> </div> </body>

这里是一个与代码codepen还有： https://codepen.io/anon/pen/KoZQEN

Answer 1:

$(document).ready(function() { 
    myShuffle.filter('fruit');
});

这应该选择水果时，您的文档愿与加载。在您的JavaScript文件的开头加入这段代码。

Answer 2:

你可以尝试添加一个id的水果单选按钮元素，例如foo 。
然后，您可以触发文档加载该元素上点击：

$(document).ready(function() { 
  $("#foo").trigger("click");
});

如果你使用这个简单的触发器（甚至做的另一个脚本的方式），我建议你修改.image-item CSS是这样的：

.image-item {
  display: none;
  margin-bottom: 30px;
}

并添加$(".image-item").show(); 在我们的新功能，以避免看到在页面加载的伎俩：

$(document).ready(function() { 
  $("#foo").trigger("click");
  $(".image-item").show();
});

你可以看到它在这里的行动：
https://codepen.io/anon/pen/eMVVxg

希望能帮助到你。

Answer 3:

我来到这里寻找答案同样的问题，但不能得到任何的解决方案的工作，但是成功的贡献者我指出了正确的方向，最终通过创建一个函数，在页面加载执行解决它：

 function shuffleInit (id){ $(document).ready(function() { $('#grid').hide(); jQuery('#'+id)[0].click(); $('#grid').show(); $('#'+id).trigger('click'); });