jquery.isotope实现瀑布流布局筛选过滤排序动画效果代码-html代码-BFW代码库

jquery.isotope实现瀑布流布局筛选过滤排序动画效果代码

代码语言：html

所属分类：瀑布流

代码描述：jquery.isotope实现瀑布流布局筛选过滤排序动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Isotope</title>
    <style>
        /* Start: Recommended Isotope styles */
    
    /**** Isotope Filtering ****/
    
    .isotope-item {
      z-index: 2;
    }
    
    .isotope-hidden.isotope-item {
      pointer-events: none;
      z-index: 1;
    }
    
    /**** Isotope CSS3 transitions ****/
    
    .isotope,
    .isotope .isotope-item {
      -webkit-transition-duration: 0.8s;
         -moz-transition-duration: 0.8s;
          -ms-transition-duration: 0.8s;
           -o-transition-duration: 0.8s;
              transition-duration: 0.8s;
    }
    
    .isotope {
      -webkit-transition-property: height, width;
         -moz-transition-property: height, width;
          -ms-transition-property: height, width;
           -o-transition-property: height, width;
              transition-property: height, width;
    }
    
    .isotope .isotope-item {
      -webkit-transition-property: -webkit-transform, opacity;
         -moz-transition-property:    -moz-transform, opacity;
          -ms-transition-property:     -ms-transform, opacity;
           -o-transition-property:      -o-transform, opacity;
              transition-property:         transform, opacity;
    }
    
    /**** disabling Isotope CSS3 transitions ****/
    
    .isotope.no-transition,
    .isotope.no-transition .isotope-item,
    .isotope .isotope-item.no-transition {
      -webkit-transition-duration: 0s;
         -moz-transition-duration: 0s;
          -ms-transition-duration: 0s;
           -o-transition-duration: 0s;
              transition-duration: 0s;
    }
    
    /* End: Recommended Isotope styles */
    
    
    
    /* disable CSS transitions for containers with infinite scrolling*/
    .isotope.infinite-scrolling {
      -webkit-transition: none;
         -moz-transition: none;
          -ms-transition: none;
           -o-transition: none;
              transition: none;
    }
    
    
    /**** Base styles ****/
    
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    
    body {
      padding: 20px;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
      font-size: 13px;
      line-height: 1.7em;
      background: #1F1E1D;
      color: #FFF;
    }
    
    h1, h2, h3, p, ul, ol, pre, dl {
      margin-bottom: 1.0em;
    }
    
    h1, h2, #super-list, .element, .tagline, #index-list, 
    .super-list .link {
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }
    
    h1, h2, h3 { font-weight: bold; }
    
    h1 {
      font-size: 32px;
      line-height: 1.1em;
    }
    
    h2 {
      font-size: 24px;
      line-height: 1.1em;
    }
    
    ul, ol {
      margin-left: 1.5em;
    }
    
    a,
    a code {
      color: #FB4;
      text-decoration: none;
    }
    
    a:hover,
    a:hover code { 
      color: #4BF; 
    }
    
    a:active,
    a:active code {
      color: #1FB;
      background: black;
    }
    
    a img { border: none; }
    
    em { font-style: italic; }
    strong { font-weight: bold; }
    
    blockquote {
      padding-left: 1.0em;
      margin-left: 1.0em;
      border-left: 1px solid #333;
      font-style: italic;
    }
    
    /**** Isotope styles ****/
    
    /* required for containers to inherit vertical size from window */
    html,
    body {
      height: 100%;
    }
    
    #container {
      border: 1px solid #666;
      padding: 5px;
      margin-bottom: 20px;
    }
    
    .element {
      width: 110px;
      height.........完整代码请登录后点击上方下载按钮下载查看