flexbox:1.0.0_筛选后的Flexbox：动态图片库

flexbox:1.0.0

While I’ve shown filtered responsive image galleries in the past, they don’t have the dynamism that some designers desire. Of course, it’s easy to take “dynamism” too far, into what I refer to as “swooshy-swooshy” UI, with massive dependencies on frameworks and plugins and everything on the page whirling about in confusion.

尽管我过去展示过过滤后的 响应式图片库 ，但它们没有某些设计师所希望的动态性。 当然，很容易将“动态性”带到我所谓的“ swooshy-swooshy” UI中，因为它对框架和插件的依赖性很大，而且页面上的所有内容都在混乱中旋转。

This gallery code seeks balance: a straightforward UI coupled with non-disorienting animation. Along the way, we can learn a few things about making progressively enhanced UI elements.

此库代码寻求平衡：简单易用的UI加上不引人入胜的动画。 一路上，我们可以学到一些有关逐步增强UI元素的知识 。

HTML和CSS (The HTML & CSS)

The markup and styles are fairly straightforward: each gallery image is placed inside a <figure> element, which in turn are placed inside a <div>. Another <div>, empty to start, is placed at the top to receive our UI.

标记和样式非常简单：每个图库图像都放在<figure>元素内，而<figure>元素又位于<div> 。 另一个<div> (开头是空的)放在顶部，以接收我们的UI。

<div id="selectionbar"></div>
<div id="dynaflex">
	<figure data-group="bears">
        <img src="polar-bear-closeup.jpg" alt>
    </figure>
    <figure data-group="tigers" class="cub">
        <img src="tiger-cub.jpg" alt>
    </figure>
    <figure data-group="lions" class="on-grass">
        <img src="lion-on-grass.jpg" alt>
    </figure>
    <figure data-group="tigers">
        <img src="tiger.jpg" alt>
    </figure>
    <figure data-group="bears">
        <img src="polar-bear-swimming.jpg" alt>
    </figure>
    <figure data-group="lions">
        <img src="lion-and-lioness.jpg" alt>
     </figure>
</div>

Each image is categorised with a data- attribute value on the <figure> that contains it. Because we’ll be using flexbox, each image must be the same aspect ratio, or manipulated via its flex CSS value to be consistent with the others. You could use my “Modern Masonry” script to do so, or manually adjust the images through the addition of classes.

每个图像都在包含它的<figure>上以data-属性值进行分类。 因为我们将使用flexbox ，所以每个图像必须具有相同的宽高比，或者通过其flex CSS值进行操作以与其他图像保持一致。 您可以使用“现代砌体”脚本来执行此操作，也可以通过添加类来手动调整图像。

#dynaflex { 
	display: flex; font-size: 0;
	flex-flow: row wrap; 
}
#dynaflex figure { 
	margin: 0; min-width: 201px;
	flex: 0.67; transition: .5s; 
}
#dynaflex figure img { 
	width: 100%; height: auto; 
}
#dynaflex figure.cub {
	flex: 0.568; min-width: 170.49px; 
}
#dynaflex figure.on-grass { 
	flex: 1; min-width: 300px; 
}
#dynaflex figure.diminish { 
	min-width: 0; flex: 0; 
}

Somewhat surprisingly, the flex value of elements can be animated: we’ll be doing that by using JavaScript to add and remove the .diminish class.

令人惊讶的是，元素的flex值可以动画化：我们将通过使用JavaScript添加和删​​除.diminish类来实现。

JavaScript (The JavaScript)

After identifying elements on the page for the script, we create an empty categories array, which collects together the all data-group values used by <figure> elements. unique then filters the array to keep only unique values, reverses it (to get the result ["lions", "tigers", "bears"]) before adding all as the first array value.

在确定脚本页面上的元素之后，我们创建一个空的categories数组，该数组将<figure>元素使用的所有data-group值收集在一起。 unique然后对数组进行过滤，以仅保留唯一值，将其反转(以获取结果["lions", "tigers", "bears"] )，然后再将all值添加为第一个数组值。

var container = document.getElementById("dynaflex"),
array = container.getElementsByTagName("figure"),
selectionBar = document.getElementById("selectionbar"),
categories = [];
for (var i = 0; i < array.length ;i++) {
categories[i] = array[i].dataset.group;
}
var unique = categories.filter(function(item, i, ar){
	return ar.indexOf(item) === i; 
});
unique.reverse();
unique.unshift("all");

创建一个渐进式下拉列表 (Create A Progressive Dropdown)

Next, we need to create the dropdown that will be used to actively filter the images:

接下来，我们需要创建一个用于主动过滤图像的下拉列表 ：

var dropdown = document.createElement("select");
dropdown.id = "categories";
var dropdownLabel = document.createElement("label");
dropdownLabel.for = dropdown.id;
dropdownLabel.innerHTML = "Show : ";
unique.forEach(buildDropDown);
selectionBar.appendChild(dropdownLabel);
selectionBar.appendChild(dropdown);

You can see the line that uses the ECMAScript5 forEach method to call on the buildDropDown function, which is as follows:

您可以看到使用ECMAScript5 forEach方法调用buildDropDown函数的行，如下所示：

function buildDropDown(name,index,array) {
var opt = document.createElement("option");
opt.value = name;
opt.innerHTML = name;
dropdown.appendChild(opt);
}

The function builds a dropdown menu with the values of unique. Now we just need to react when the menu is used:

该函数将使用unique值构建一个下拉菜单。 现在我们只需要在使用菜单时做出React：

dropdown.onchange = function() {
	if (this.value == "all") { 
		for (var i = 0; i < array.length; ++i) {
array[i].classList.remove("diminish");
		}
	} else {
		var hide = document.querySelectorAll('#dynaflex figure:not([data-group="'+this.value+'"])');
		for (var i = 0; i < hide.length; ++i) {
hide[i].classList.add("diminish");
		}
		var show = document.querySelectorAll('#dynaflex figure[data-group="'+this.value+'"]');
		for (var i = 0; i < show.length; ++i) {
show[i].classList.remove("diminish");
		}
	}
}

While the animation isn’t as smooth as I’d like it to be, and does not render completely correctly in Mobile Safari (due to a bug in the browser that affects images approaching their min-width dimensions) I think the approach has promise… and on the whole, the result is a lot better than dependency on a framework and plugin.

虽然动画不像我希望的那样平滑，并且不能在Mobile Safari中完全正确渲染(由于浏览器中的错误会影响接近其min-width尺寸的图像)，但我认为这种方法很有希望…总体而言，结果要比对框架和插件的依赖要好得多。

翻译自: https://thenewcode.com/945/Filtered-Flexbox-A-Dynamic-Image-Gallery

flexbox:1.0.0