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 相关文章推荐
node.js中的require使用详解
Dec 15 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
React服务端渲染(总结)
Jul 01 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
小试SVG之新手小白入门教程
Jan 08 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
javascript function(函数类型)使用与注意事项小结
Jun 10 Javascript
Element Backtop回到顶部的具体使用
Jul 27 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
php自动获取关键字的方法
2015/01/06 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
python中的字符串内部换行方法
2018/07/19 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
深入浅析python的第三方库pandas
2020/02/13 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
环保志愿者活动方案
2014/08/14 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
给朋友的道歉短信
2015/05/12 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
PHP实现两种排课方式
2021/06/26 PHP
实操Python爬取觅知网素材图片示例
2021/11/27 Python