jquery实现瀑布流效果分享


Posted in Javascript onMarch 26, 2014

使用jquery实现瀑布流效果,大家参考使用吧,运行后可以看到效果,代码中的JQ引入一定要换成自己的才好

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <title>AJAX</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
 <script src="js/jquery-1.8.1.min.js"></script>
 <script src="js/jquery.masonry.min.js"></script>
 <script src="js/jquery.infinitescroll.min.js"></script>
 <style>
  #container {
   width: 90%;
   margin: 80px auto;
  }
  .box {
   box-shadow: 0 0 4px #999;
   margin-top: 40px;
   padding: 40px;
   font-family: "Century Gothic", "Microsoft YaHei", Arial, monospace;
  }
  .loading {
   text-align: center;
  }
 </style>
</head>
<body>
<div id="container">
 <?php
 $page = isset($_GET['page']) ? intval($_GET['page']) : 1;
 $size = 20;
 try
 {
  $pdo = new PDO('mysql:host=localhost;dbname=wechatbook', 'root', 'root');
  $offset = ($page - 1) * $size;
  $sql = "SELECT title FROM wcb_rss_news limit $offset,$size";
  $stmt = $pdo->query($sql);
  $stmt->setFetchMode(PDO::FETCH_ASSOC);
  $list = $stmt->fetchAll();
  if (!empty($list))
  {
   foreach ($list as $row)
   {
    ?>
    <div class="box"><?= $row['title'] ?></div>
   <?php
   }
  }
  else
  {
   echo '';
  }
 }
 catch (PDOException $e)
 {
 }
 ?>
</div>
<div class="loading">
</div>
<div id="next-link"><a href="data.php?page=1">下一页</a></div>
<script>
 $(function() {
  var $container = $("#container");
  $container.imagesLoaded(function() {
   $container.masonry({
    itemSelector: '.box',
    isAnimated: true,
    columnWidth:200,
    gutterWidth:200,
  //  isFitWidth:true,//自适应宽度
    isResizableL:true// 是否可调整大小
   });
  });
  $container.infinitescroll({
   navSelector: '#next-link',
   nextSelector: '#next-link a',
   itemSelector: '.box',
   animate: true,
   loading: {
    msgText: "加载中...",
    finishedMsg: '没有新数据了...',
    img: 'http://www.3water.ne/img/loading.gif',
    selector: '.loading'
   },
   localMode: true
  }, function(newElements) {
   console.dir(newElements)
   var $newEle = $(newElements);
   $newEle.imagesLoaded(function() {
    $container.masonry('appended', $newEle, true);
   });
  });
 });
</script>
</body>
</html>
Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 #Javascript
Jquery对数组的操作技巧整理
Mar 25 #Javascript
常用的几段javascript代码分享
Mar 25 #Javascript
捕获和分析JavaScript Error的方法
Mar 25 #Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 #Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 #Javascript
jquery动态更换设置背景图的方法
Mar 25 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP原生函数一定好吗?
2014/12/08 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JavaScript 基础问答三
2008/12/03 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
offsetParent 算法分析
2010/04/05 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
django使用channels实现通信的示例
2020/10/19 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
机工车间主任岗位职责
2014/03/05 职场文书
陈欧广告词
2014/03/14 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书