html文章图文标题,html5带flexbox网格图片的文章标题全屏图片滑动显示布局

这是一款效果很酷的html5带flexbox网格图片的文章标题全屏图片滑动显示布局。插件中使用了一些Flexbox和 CSS Transitions 技术，请确保你的浏览器支持这些特性。

这个文章标题布局插件中将使用到以下的技术：

Some JavaScript for toggling classes among others

该文章标题布局插件中的网格布局将使用Flexbox，我们通过CSS media queries来控制网格的数量和它们的高度，通过为网格的宽和高使用vw单位(快速了解vw)，我们可以创建一个自适应的的网格布局，并保证图片的宽高比基本上是一个正方形。如果你想了解更多，可以查看caniuse.com的Can I Use，获取它们的浏览器支持和使用方法。

HTML结构

首先我们需要一个header和一个title，还需要一个用于放置内容的网格。所有这些都要包裹到container容器中以便于后面用JS来控制它们。

Essential Feelings

View content

下面是网格的html结构:

Magnificence

Electrifying

在这里你也可也是用一个无序列表或figure元素来做网格。

JAVASCRIPT

我们使用js脚本来在点击按钮时添加和移除class，同时还用js脚本来控制页面滚动条的行为。

(function() {

var container = document.getElementById( 'container' ),

trigger = container.querySelector( 'button.trigger' );

function toggleContent() {

if( classie.has( container, 'container--open' ) ) {

classie.remove( container, 'container--open' );

classie.remove( trigger, 'trigger--active' );

window.addEventListener( 'scroll', noscroll );

}

else {

classie.add( container, 'container--open' );

classie.add( trigger, 'trigger--active' );

window.removeEventListener( 'scroll', noscroll );

}

}

function noscroll() {

window.scrollTo( 0, 0 );

}

// reset scrolling position

document.body.scrollTop = document.documentElement.scrollTop = 0;

// disable scrolling

window.addEventListener( 'scroll', noscroll );

trigger.addEventListener( 'click', toggleContent );

})();