使用 Masonry 实现瀑布流


发布评论 (0)

Pinterest(http://www.pinterest.com)最近很火,整体页面也非常炫酷。我们使用 Masonry 来实现与 Pinterest 类似的瀑布流效果,每个元素的高度不同,列数则根据浏览器宽度来定,以及炫酷的加载效果(JQUERY动画和CSS3动画)。 Masonry 官网 http://masonry.desandro.com/ Masonry min 25kb 直接下载地址 http://masonry.desandro.com/masonry.pkgd.min.js

首先引入 JS 文件

<script src="/js/masonry.min.js"></script>
放置一些元素
<ul id="container">
  <li class="item">
    <img src="" />
  </li>
  <li class="item">
    <img src="" />
  </li>
  <li class="item">
    <img src="" />
  </li>
  <li class="item">
    <img src="" />
  </li>
</ul>
添加CSS样式
.item { width: 220px; }

启动Masonry

$(document).ready(function(){
    var container = $('#container'); //瀑布流加载
    // initialize
    container.masonry({
        columnWidth: 26, //列宽
        itemSelector: '.item', //元素 .item 即 class = item
        isAnimated: true, //是否使用 动画 启用后会使用JQUERY动画
    });
});
其他参数请看这里 http://masonry.desandro.com/options.html Masonry 同样也支持原生 Javascript 这里我们使用 Jquery 的方法,所以在启动前请先确认已经加载了最新版本的 jquery.js
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
OK, 如果你的元素高度不统一现在你应该已经可以看到他们有条理的聚合在一起了吧!  

使用AJAX加载数据

$.post("/ajaxurl",{},function(result){
  //result 为 AJAX 取到的结果集
  $('#container').prepend( result ).masonry('reloadItems').masonry('layout');
});
这里我们向 $('#container') 中 append() 元素。 刷新页面我们就可以看到 JQUERY 带来的 动画效果!  

使用CSS3的动画效果来加载页面

我们使用 CSS3 的动画来分别实现这个例子中的 8 个加载动画效果 http://tympanus.net/Development/GridLoadingEffects/index2.html   首先写入 CSS动画
<style>
    



/* Effect 1: opacity */
.grid.effect-1 li.item {
    -webkit-animation: fadeIn 0.65s ease forwards;
    -moz-animation: fadeIn 0.65s ease forwards;
    animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
    to { opacity: 1; }
}

@-moz-keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Effect 2: Move Up */
.grid.effect-2 li.item {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: moveUp 0.65s ease forwards;
    -moz-animation: moveUp 0.65s ease forwards;
    animation: moveUp 0.65s ease forwards;
}

@-webkit-keyframes moveUp {
    to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
    to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
    to { transform: translateY(0); opacity: 1; }
}

/* Effect 3: Scale up */
.grid.effect-3 li.item {
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-animation: scaleUp 0.65s ease-in-out forwards;
    -moz-animation: scaleUp 0.65s ease-in-out forwards;
    animation: scaleUp 0.65s ease-in-out forwards;
}

@-webkit-keyframes scaleUp {
    to { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes scaleUp {
    to { -moz-transform: scale(1); opacity: 1; }
}

@keyframes scaleUp {
    to { transform: scale(1); opacity: 1; }
}

/* Effect 4: fall perspective */
.grid.effect-4 {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.grid.effect-4 li.item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    -moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    -webkit-animation: fallPerspective .8s ease-in-out forwards;
    -moz-animation: fallPerspective .8s ease-in-out forwards;
    animation: fallPerspective .8s ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
    100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@-moz-keyframes fallPerspective {
    100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

/* Effect 5: fly (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-5 {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.grid.effect-5 li.item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    -moz-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: fly .8s ease-in-out forwards;
    -moz-animation: fly .8s ease-in-out forwards;
    animation: fly .8s ease-in-out forwards;
}

@-webkit-keyframes fly {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes fly {
    100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes fly {
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 6: flip (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-6 {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.grid.effect-6 li.item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotateX(-80deg);
    -moz-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    -webkit-animation: flip .8s ease-in-out forwards;
    -moz-animation: flip .8s ease-in-out forwards;
    animation: flip .8s ease-in-out forwards;
}

@-webkit-keyframes flip {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes flip {
    100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
    100% { transform: rotateX(0deg); opacity: 1; }
}

/* Effect 7: helix (based on http://lab.hakim.se/scroll-effects/ by @hakimel) */
.grid.effect-7 {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.grid.effect-7 li.item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-animation: helix .8s ease-in-out forwards;
    -moz-animation: helix .8s ease-in-out forwards;
    animation: helix .8s ease-in-out forwards;
}

@-webkit-keyframes helix {
    100% { -webkit-transform: rotateY(0deg); opacity: 1; }
}

@-moz-keyframes helix {
    100% { -moz-transform: rotateY(0deg); opacity: 1; }
}

@keyframes helix {
    100% { transform: rotateY(0deg); opacity: 1; }
}

/* Effect 8:  */
.grid.effect-8 {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
}

.grid.effect-8 li.item {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
    -webkit-animation: popUp .8s ease-in forwards;
    -moz-animation: popUp .8s ease-in forwards;
    animation: popUp .8s ease-in forwards;
}

@-webkit-keyframes popUp {
    70% { -webkit-transform: scale(1.1); opacity: .8; -webkit-animation-timing-function: ease-out; }
    100% { -webkit-transform: scale(1); opacity: 1; }
}

@-moz-keyframes popUp {
    70% { -moz-transform: scale(1.1); opacity: .8; -moz-animation-timing-function: ease-out; }
    100% { -moz-transform: scale(1); opacity: 1; }
}

@keyframes popUp {
    70% { transform: scale(1.1); opacity: .8; animation-timing-function: ease-out; }
    100% { transform: scale(1); opacity: 1; }
}    

</style>
关闭默认的 JQUERY 动画效果
isAnimated: false,
添加CSS
<ul id="container" class="grid effect-1">
<!-- 这里有8种效果可选 修改CLASS effect-1 - effect-8 即可 -->
</ul>
即可使用CSS动画效果来加载页面
使用瀑布流必不可少的需要更新 URL  jquery.hash 插件 AJAX URL监听

本文发布于: 2014-05-06 11:50:57,作者: Zack Lee。 属于: Web, PHP, Javascript 分类,被贴了 前端开发 标签。


> 评论区域

评论系统维护中

还没有人参与评论