瀑布流waterfall.js插件，php+ajax动态读取数据示例

最新推荐文章于 2024-08-23 11:30:00 发布

zyytaiyame

最新推荐文章于 2024-08-23 11:30:00 发布

阅读量3.7k

点赞数

文章标签： ajax php ie 8

本文链接：https://blog.csdn.net/zyytaiyame/article/details/54020901

版权

这是一个关于如何使用waterfall.js插件并结合PHP和AJAX实现兼容IE8及Chrome的瀑布流布局的教程。通过PHP动态读取数据库数据，并利用AJAX无刷新加载更多内容。

摘要由CSDN通过智能技术生成

瀑布流waterfall.js插件，php+ajax动态读取数据示例
兼容IE8和Chrome浏览器
效果图


<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流</title>
<style>
body,div{ margin:0; padding:0}
img{ border:0}
#container{ text-align:center}
#container .cell{ padding:5px 5px 0; border:1px solid #E3E3E3; background:#F5F5F5; margin-top:10px}
#container p{ line-height:20px; margin-top:5px}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
/**
 ************************************************************
 ***@project jquery瀑布流插件
 ***@author hcp0209@gmail.com
 ***@ver version 1.0
 ************************************************************
 */
;(function($){
    
   var 
   //参数
   setting={
      column_width:204,//列宽
      column_className:'waterfall_column',//列的类名
      column_space:10,//列间距
      cell_selector:'.cell',//要排列的砖块的选择器，context为整个外部容器
      img_selector:'img',//要加载的图片的选择器
      auto_imgHeight:true,//是否需要自动计算图片的高度
      fadein:true,//是否渐显载入
      fadein_speed:600,//渐显速率，单位毫秒
      insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入
      getResource:function(index){
     }  //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
   },
   //
   waterfall=$.waterfall={},//对外信息对象
   $container=null;//容器
   waterfall.load_index=0, //加载次数
   $.fn.extend({
       waterfall:function(opt){
    
          opt=opt||{};