快捷導(dǎo)航

jquery實(shí)現(xiàn)瀑布流效果分享

更新時(shí)間：2014年03月26日 10:33:08 作者：

這篇文章主要介紹了jquery實(shí)現(xiàn)瀑布流效果分享,需要的朋友可以參考下

使用jquery實(shí)現(xiàn)瀑布流效果，大家參考使用吧，運(yùn)行后可以看到效果，代碼中的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">下一頁(yè)</a></div>
<script>
$(function() {
  var $container = $("#container");
  $container.imagesLoaded(function() {
   $container.masonry({
    itemSelector: '.box',
    isAnimated: true,
    columnWidth:200,
    gutterWidth:200,
  //  isFitWidth:true,//自適應(yīng)寬度
    isResizableL:true// 是否可調(diào)整大小
   });
  });
  $container.infinitescroll({
   navSelector: '#next-link',
   nextSelector: '#next-link a',
   itemSelector: '.box',
   animate: true,
   loading: {
    msgText: "加載中...",
    finishedMsg: '沒(méi)有新數(shù)據(jù)了...',
    img: 'http://www.jb51.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>

您可能感興趣的文章:

相關(guān)文章

淺談EasyUi ComBotree樹修改父節(jié)點(diǎn)選擇的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談EasyUi ComBotree樹修改父節(jié)點(diǎn)選擇的問(wèn)題。
2016-11-11
jQuery插件FusionCharts繪制的3D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制的3D環(huán)餅圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用FusionCharts載入xml格式數(shù)據(jù)繪制圖形的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
JQuery上傳插件Uploadify使用詳解及錯(cuò)誤處理
關(guān)于JQuery上傳插件Uploadify使用詳解網(wǎng)上一大把，基本上內(nèi)容都一樣。我根據(jù)網(wǎng)上的步驟配置完成后，會(huì)報(bào)一些錯(cuò)誤，而我根據(jù)這些錯(cuò)誤去網(wǎng)上找解決方案，卻沒(méi)有相關(guān)資料，所以為了不讓更多的朋友走彎路，我把我遇到的一些問(wèn)題進(jìn)行匯總，也方便我自己以后查閱。
2010-04-04
jQuery驗(yàn)證插件 Validate詳解
validate是一款很好的jq插件,提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫用戶自定義方法的 API。
2014-11-11
jquery 學(xué)習(xí)之二屬性相關(guān)
jquery 學(xué)習(xí)之二屬性相關(guān)資料，學(xué)習(xí)jquery的朋友可以參考下。
2010-11-11
使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天
這篇文章主要介紹了使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jQuery排序插件tableSorter使用方法
這篇文章主要為大家詳細(xì)介紹了jQuery排序插件tableSorter的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
Labelauty–jQuery單選框/復(fù)選框美化插件分享
這篇文章主要介紹了Labelauty–jQuery單選框/復(fù)選框美化插件，能夠?qū)崿F(xiàn)單選框/復(fù)選框原本的選中、未選中、禁用等功能外，還能夠設(shè)置選中和未選中的文本信息、標(biāo)簽的最小寬度等，感興趣的小伙伴可以參考下。
2015-09-09
jQuery 的全選(全非選)即取得被選中的值使用介紹
全選、全非選即取得被選中的值在日常開發(fā)應(yīng)用中很廣泛，下面有個(gè)不錯(cuò)的示例，大家可以感受下
2013-11-11
jQuery實(shí)現(xiàn)天貓商品放大鏡效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)天貓商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03