使用页面加载按钮过滤图像 [英] Filter images with a button on page load
问题描述
我正在努力弄清楚如何在页面加载时过滤图像，而不仅仅是当用户使用 Shufflejs 单击 Bootstrap 中的按钮时.我希望选择水果"按钮以在页面加载时仅显示这些图像.当前，所有图像都显示在页面加载中.我试过使用checked"和active"属性，但它只检查按钮并仍然显示所有图像.
我是否缺少一个简单的解决方案?
代码如下:
var Shuffle = window.Shuffle;var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), {itemSelector: '.image-item',sizer: '.my-sizer-element',缓冲区:1，});window.jQuery('input[name="shuffle-filter"]').on('change', function(evt) {var input = evt.currentTarget;如果(输入.检查){myShuffle.filter(input.value);}});/* 默认样式，因此 shuffle 不必设置它们(如果它们丢失，它会设置)*/.my-shuffle {位置:相对；溢出:隐藏；}/* 使垂直槽与水平槽相同 */.image-item {底边距:30px；}/* 确保图片在加载时占用相同的空间 *//* https://vestride.github.io/Shuffle/images */.方面 {位置:相对；宽度:100%；高度:0；填充底部:100%；溢出:隐藏；}.aspect__内{位置:绝对；顶部:0；右:0；底部:0；左:0；}.aspect--16x9 {填充底部:56.25%；}.aspect--9x80 {padding-bottom: calc(112.5% + 30px);}.aspect--32x9 {填充底部:计算(28.125% - 8px)；}.image-item img {显示:块；宽度:100%；最大宽度:无；高度:100%；适合对象:覆盖；}<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"><!-- 以上 3 个元标记 * 必须* 排在首位；任何其他头部内容必须在*这些标签之后* --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><身体><div class="容器"><div class="container mt-3"><div class="row"><div class="col"><p class="mb-1">过滤器:</p><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 class="btn btn-outline-primary"><input type="radio" name="shuffle-filter" value="nature"/>Nature<label class="btn btn-outline-primary.active"><input type="radio" name="shuffle-filter" value="fruit" 选中/>Fruit<label class="btn btn-outline-primary"><input type="radio" name="shuffle-filter" value="架构"/>架构
<div class="row my-shuffle"><figure class="image-item col-3" data-groups="["nature"]"><div class="aspect aspect--16x9"><div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=882e851a008e83b7a80d05bdc96aa817"/obj.tal"
