澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-09-11 14:10 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

jquery实现瀑布流效果分享,Masonry瀑布流插件使用

选择jquery达成瀑布流效果,我们参谋运用啊,运营后方可知到效果,代码中的JQ引进应当要换来本人的才好

jquery masonry 瀑布流 可搭配bootstrap响应式

jQuery Masonry瀑布流插件使用详解,jquerymasonry

Masonry是 一款特别庞大的jQuery动态网格布局插件,能够援助开荒人士急迅支付近乎剪贴画的分界面效果。和CSS中float的职能不太雷同的地点在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列成分,然后将下四个成分放置到网格中的下四个支付区域。这种功效能够最小化管理分歧中度的成分在笔直方向的空隙。如下:

图片 1

在上海体育地方中山大学家可以见到,在网格布局中应用float来管理不相同高度的要素会使得垂直方向的成分间距离非常的大,而使用Masonry管理后,间隔变小。

用法

先是倒入类库,如下:

复制代码 代码如下:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">  
</script><script src="/path/to/jquery.masonry.min.js"></script> 

下一场,针对成分容器实行masonry,如下:

复制代码 代码如下:

$(function(){   
  $('#container').masonry({   
    // options   
    itemSelector : '.item',   
    columnWidth : 240   
  });   
}); 

html代码

复制代码 代码如下:

<div id="container">   
  <div class="item">...</div>   
  <div class="item">...</div>   
  <div class="item">...</div>   
  ...   
</div> 

css

复制代码 代码如下:

.item {   
  width: 220px;   
  margin: 10px;   
  float: left;   

假若你加载的要素中有图表的话,那么须要保证Masonry在颇具图片都加载完后才实施,供给调用如下代码:

复制代码 代码如下:

var $container = $('#container');   
$container.imagesLoaded(function(){   
  $container.masonry({   
    itemSelector : '.item',   
    columnWidth : 240   

Masonry瀑布流插件使用详解,jquerymasonry Masonry是 一款特别庞大的jQuery动态网格布局插件,能够扶助开辟人士赶快支付近乎剪贴画的分界面...

复制代码 代码如下:

(1)分别加载jquery插件与jquery.masonry插件八个公文:

<!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;
  }

    <script src="js/jquery.min.js"></script>

  .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: '',
    selector: '.loading'
   },
   localMode: true
  }, function(newElements) {
   console.dir(newElements)
   var $newEle = $(newElements);
   $newEle.imagesLoaded(function() {
    $container.masonry('appended', $newEle, true);
   });
  });
 });
</script>
</body>
</html>

    <script src="js/jquery.masonry.min.js"></script>

您可能感兴趣的小说:

  • Jquery瀑布流插件使用介绍
  • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
  • jQuery瀑布流插件Wookmark使用实例
  • jQuery 梅森ry瀑布流插件使用详解
  • jQuery 瀑布流 相对定位布局(二)(延迟AJAX加载图片)
  • jQuery完成瀑布流布局
  • jQuery达成瀑布流布局详解(PC和移动端)
  • jQuery.lazyload masonry勘误图片瀑布流代码
  • jquery轻易瀑布流达成原理及ie8下测量检验代码
  • 依照jQuery达成瀑布流页面

(2)css样式表:

.box {

  margin-bottom: 10px;

  float: left;

  width: 300px;

}

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:jquery实现瀑布流效果分享,Masonry瀑布流插件使用

关键词: 澳门威利斯人