html5带flexbox网格图片的文章标题全屏图片滑动显示布局_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

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

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

CSS Transitions
Media Queries
Flexbox with Viewport Units
Some JavaScript for toggling classes among others

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

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

HTML结构

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

<header class="intro">
  <img class="intro__image" src="img/header.jpg" alt="Iceland glacier"/>
  <div class="intro__content">
    <h1 class="intro__title">Essential Feelings</h1>
    <div class="intro__subtitle">
      <div class="codrops-links">
        <!-- links -->
      </div>
      <div class="intro__description"> <!-- ... --> </div>
      <button class="trigger">
        <svg width="100%" height="100%" viewBox="0 0 60 60" preserveAspectRatio="none">
          <g class="icon icon--grid">
            <rect x="32.5" y="5.5" width="22" height="22"/>
            <rect x="4.5" y="5.5" width="22" height="22"/>
            <rect x="32.5" y="33.5" width="22" height="22"/>
            <rect x="4.5" y="33.5" width="22" height="22"/>
          </g>
          <g class="icon icon--cross">
            <line x1="4.5" y1="55.5" x2="54.953" y2="5.046"/>
            <line x1="54.953" y1="55.5" x2="4.5" y2="5.047"/>
          </g>
        </svg>
        <span>View content</span>
      </button>
    </div><!-- /intro__subtitle -->
  </div><!-- /intro__content -->
</header><!-- /intro -->

下面是网格的html结构:

<section class="items-wrap">

  <a href="#" class="item">
    <img class="item__image" src="img/item01.jpg" alt="item01"/>
    <h2 class="item__title">Magnificence</h2>
  </a>

  <a href="#" class="item">
    <img class="item__image" src="img/item02.jpg" alt="item02"/>
    <h2 class="item__title">Electrifying</h2>
  </a>

  <!-- ... -->

</section><!-- /items-wrap -->

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

JAVASCRIPT

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

<script src="js/classie.js"></script>
<script>
  (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 );

  })();
</script>