最新消息:网站改版咯

jquery与php实现瀑布流

ECMAScript Yovae 1629浏览

jquery与php实现瀑布流,jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。用户可以无限浏览图片或内容无限加载瀑布流效果。先了解一下基本概念:

1、瀑布流是什么

瀑布流,又称瀑布流式布局。是目前比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着
瀑布流效果
页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

2、瀑布流的应用

瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作,瀑布流的主要特性便是错落有致,定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式[1],巧妙的利用视觉层级,视线的任意流动又缓解了视觉疲劳。[2]国内类Pinterest网站也如雨后春笋般出现,目前已知网站超40家。

3、瀑布流类型的网站特点

1、琳琅满目:整版以图片为主,大小不一的图片按照一定的规律排列。
2、唯美:图片的风格以唯美的图片为主。
3、操作简单:在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。

4、瀑布流的实现方式

1、传统多列浮动。代表网站蘑菇街和哇哦
2、用CSS3实现
3、绝对定位。代表网站Pinterest或者用图片延迟加载

5、瀑布流布局的优点

1、布局简单,没有特别的难点;
2、不必明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。

6、瀑布流布局的缺点

1、列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;
2、滚动加载更多数据时,还要指定插入到第几列中,不够方便。
3、只有高级浏览器中才能使用;
4、数据块排列是从上到下排列到一定高度后,再把剩余元素依次添加到下一列,这个本质上就不一样了;

*鉴于这些主要缺点,注定了该方法只能局限于高端浏览器,而且,更适合于文字多栏排列。

正文:php与jquer交互实现瀑布流

1、jquery瀑布流插件Masonry是一款很好用的jquery网页布局插件,它可以去掉不同高度div之间的空白,让你的网页看上去更加的整齐、漂亮!

官网插件下载地址以及详解地址:
示例demo及文档说明:http://masonry.desandro.com/

2、用Infinite Scroll这个插件,用户访问你的网站就不用翻页啦!实际上它是预读了后续页的内容并将其直接添加到了当前页面。下载地址:http://www.infinite-scroll.com/

3、jquery瀑布流插件使用方法:

 

//首先在页面中引入
< script src = "jquery-1.7.1.min.js" > </script>
<script src="jquery.masonry.min.js"></script > <script src = "jquery.infinitescroll.js" > </script>

排列body中的内容:
<BODY>  <div id="container">
      <div class="item">a a a a a  a</div > <div class = "item" > a a a a a a < /div>
      <div class="item">a a a a a  a</div > <div class = "item" > a a a a a a < /div>

  </div > </BODY>

//在js中调用插件:
<script type="text/javascript ">
  $(function(){
    $('#container').masonry({
      // options 设置选项
      itemSelector : '.item',//class 选择器
      columnWidth : 240 ,//一列的宽度 Integer
          isAnimated:true,//使用jquery的布局变化  Boolean
          animationOptions:{
            //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
          },
          gutterWidth:0,//列的间隙 Integer
          isFitWidth:true,// 适应宽度   Boolean
          isResizableL:true,// 是否可调整大小 Boolean
          isRTL:false,//使用从右到左的布局 Boolean
  });
});
</script>
/*当需要排列图片div时:
需要调用:*/
<script>
var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

//调用masonry插件的方法格式是:$('#container').masonry( 'methodName', [optionalParameters] )

//例如:
.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局
.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态
.masonry( 'layout', $items, callback )// 指定项目的布局
.masonry( 'option', options ) //设置option
.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序
.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版
.masonry( 'remove', $items ) //从masonry实例或dom中移除项目

//调用infinitescroll插件:
$container.infinitescroll({
        navSelector : '#page-nav', //分页导航的选择器
        nextSelector : '#page-nav a', //下页连接的选择器
        itemSelector : '.box', //你要检索的所有项目的选择器
        loading: {
                finishedMsg: 'No more pages to load.',//结束显示信息
                img: 'http://www.yovae.com/loading.gif'//loading图片
        }
},
//作为回调函数触发masonry
function( newElements ) {
// 当加载时隐藏所有新项目
        var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保证图片载入
        $newElems.imagesLoaded(function(){
// 现在可以显示所有的元素了
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
}
);"

记住 下页连接的选择器内容鼻息包含page参数,可以是URL?page=2这样的格式,php接收page参数实现数据分页。

转载请注明:Yovae Studio » jquery与php实现瀑布流