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技术技巧大全(五)
Jan 22 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
javascript常用功能汇总
Jul 05 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
html中两种获取标签内的值的方法
Jun 16 jQuery
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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php简单复制文件的方法
2016/05/09 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
javascript的this关键字详解
2019/05/20 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Django设置Postgresql的操作
2020/05/14 Python
聊聊python中的异常嵌套
2020/09/01 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
就业自荐书
2013/12/05 职场文书
地球一小时倡议书
2014/04/15 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
会计稽核岗位职责
2015/04/13 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android