2a94b8bda04ff446dcedd42276fc99ee.php 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>大可乐的博客</title>
  6. <meta name="description" content="">
  7. <meta name="viewport" content="width=device-width">
  8. <!-- Bootstrap styles -->
  9. <link rel="stylesheet" href="/Public/css/bootstrap.min.css">
  10. <!-- Font-Awesome -->
  11. <link rel="stylesheet" href="/Public/css/font-awesome/css/font-awesome.min.css">
  12. <!-- Google Webfonts -->
  13. <link href="/Public/css/m.css" rel='stylesheet' type='text/css'>
  14. <!-- Styles -->
  15. <link rel="stylesheet" href="/Public/css/style.css" id="theme-styles">
  16. <link rel="stylesheet" href="/Public/mark/css/editormd.css">
  17. <style>
  18. #infomore{
  19. background-color: #31c7f4;
  20. }
  21. #infomore:hover{
  22. background-color:#428bca;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <header>
  28. <div class="widewrapper masthead">
  29. <div class="container">
  30. <a href="<?php echo U('Index/index');?>" id="logo">
  31. <img src="/public/img/demo2.jpg" alt="clean Blog">
  32. </a>
  33. <div id="mobile-nav-toggle" class="pull-right">
  34. <a href="#" data-toggle="collapse" data-target=".clean-nav .navbar-collapse">
  35. <i class="fa fa-bars"></i>
  36. </a>
  37. </div>
  38. <nav class="pull-right clean-nav">
  39. <div class="collapse navbar-collapse">
  40. <ul class="nav nav-pills navbar-nav">
  41. <li>
  42. <a href="<?php echo U('Index/index');?>">首页</a>
  43. </li>
  44. <li>
  45. <a href="<?php echo U('Index/about');?>">关于</a>
  46. </li>
  47. <li>
  48. <a href="<?php echo U('Index/contact');?>">联系方式</a>
  49. </li>
  50. </ul>
  51. </div>
  52. </nav>
  53. </div>
  54. </div>
  55. <div class="widewrapper subheader">
  56. <div class="container">
  57. <div class="clean-breadcrumb">
  58. <a href="#">Blog</a>
  59. </div>
  60. <div class="clean-searchbox">
  61. <form action="#" method="get" accept-charset="utf-8">
  62. <input class="searchfield" id="searchbox" type="text" placeholder="Search">
  63. <button class="searchbutton" type="submit">
  64. <i class="fa fa-search"></i>
  65. </button>
  66. </form>
  67. </div>
  68. </div>
  69. </div>
  70. </header>
  71. <div class="widewrapper main">
  72. <div class="container">
  73. <div class="row">
  74. <div class="col-md-8 blog-main" id="">
  75. <?php if(is_array($show)): $i = 0; $__LIST__ = $show;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><div class="col-md-6 col-sm-6" id="water" style="height: 540px;margin-top: 20px;">
  76. <article class=" blog-teaser">
  77. <header>
  78. <img src="<?php echo ($vo['a-img']); ?>" alt="">
  79. <h4><a href="<?php echo U('Index/single',array('id'=>$vo['id']));?>" ><?php echo ($vo['a-title']); ?></a></h4>
  80. <span class="meta">发布时间:<?php echo ($vo['a-time']); ?>, </span>
  81. <span class="meta">作者:<?php if($vo['a-auther'] == null): ?>佚名<?php else: echo ($vo["a-auther"]); endif; ?></span>
  82. <hr>
  83. </header>
  84. <div class="body" style="height:100px;overflow: hidden;" escape="false">
  85. <?php echo (htmlspecialchars_decode($vo['a-jianjie'])); ?>
  86. </div>
  87. <div class="clearfix">
  88. <a href="<?php echo U('Index/single',array('id'=>$vo['id']));?>" class="btn btn-primary">Read more</a>
  89. </div>
  90. </article>
  91. </div><?php endforeach; endif; else: echo "" ;endif; ?>
  92. <!-- <div style="text-align: center;">
  93. <a href="<?php echo U('Index/index',array('more'=>'more'));?>" class="btn btn-info" id="infomore" style="border-radius: 5px;">加载更多</i></a>
  94. </div> -->
  95. </div>
  96. <aside class="col-md-4 blog-aside">
  97. <!-- <div class="aside-widget">
  98. <header>
  99. <h3>Featured Post</h3>
  100. </header>
  101. <div class="body">
  102. <ul class="clean-list">
  103. <li><a href="">Clean - Responsive HTML5 Template</a></li>
  104. <li><a href="">Responsive Pricing Table</a></li>
  105. <li><a href="">Yellow HTML5 Template</a></li>
  106. <li><a href="">Blackor Responsive Theme</a></li>
  107. <li><a href="">Portfolio Bootstrap Template</a></li>
  108. <li><a href="">Clean Slider Template</a></li>
  109. </ul>
  110. </div>
  111. </div>
  112. <div class="aside-widget">
  113. <header>
  114. <h3>Related Post</h3>
  115. </header>
  116. <div class="body">
  117. <ul class="clean-list">
  118. <li><a href="">Blackor Responsive Theme</a></li>
  119. <li><a href="">Portfolio Bootstrap Template</a></li>
  120. <li><a href="">Clean Slider Template</a></li>
  121. <li><a href="">Clean - Responsive HTML5 Template</a></li>
  122. <li><a href="">Responsive Pricing Table</a></li>
  123. <li><a href="">Yellow HTML5 Template</a></li>
  124. </ul>
  125. </div>
  126. </div> -->
  127. <div class="aside-widget">
  128. <header>
  129. <h3>Tags</h3>
  130. </header>
  131. <div class="body clearfix">
  132. <ul class="tags">
  133. <?php if(is_array($tags)): $i = 0; $__LIST__ = $tags;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;?><li><a href="<?php echo U('Index/search',array('type'=>$key));?>"><?php echo ($key); ?>(<?php echo ($vo); ?>)</a></li><?php endforeach; endif; else: echo "" ;endif; ?>
  134. </ul>
  135. </div>
  136. </div>
  137. </aside>
  138. </div>
  139. </div>
  140. </div>
  141. <footer>
  142. <div class="widewrapper copyright">
  143. Copyright 2019 More Templates <a href="#" target="_blank" title="我爱大可乐">我爱大可乐的博客</a>
  144. </div>
  145. </footer>
  146. <script src="/Public/jquery/jquery.min.js"></script>
  147. <script src="/Public/js/bootstrap.min.js"></script>
  148. <script src="/Public/js/modernizr.js"></script>
  149. <script type="text/javascript" src="/Public/mark/editormd.js"></script>
  150. <script src="/Public/js/waterfall.js"></script>
  151. <script>
  152. window.onload = function () {
  153. $('.col-md-8 blog-main').WaterFall();
  154. }
  155. </script>
  156. <script type="text/javascript">
  157. window.onload = function(){
  158. //每个格格不一定往自己序号%3这个列插入,看哪个列目前最矮,插在哪里=
  159. //得到所有的grid
  160. // $grids = $(".col-md-6 col-sm-6");
  161. //用一个数组存储当前三个列的总高度
  162. var colHeight = [0,0,0];
  163. // console.log(colHeight);
  164. // 遍历小格格
  165. $(".col-md-6 col-sm-6").each(function(){
  166. //找一下当前的最短列是谁
  167. var minValue = _.min(colHeight); //colHeight里面的最小的值!
  168. //看一下最短列出现在index几的位置上
  169. var minIndex = _.indexOf(colHeight,minValue);//最短的值的下标
  170. // console.log(minIndex);
  171. $(this).css({
  172. "top" : minValue ,
  173. "left" : minIndex * 270
  174. });
  175. colHeight[minIndex] += $(this).outerHeight() + 20;
  176. // console.log(colHeight[minIndex]);
  177. })
  178. }
  179. </script>
  180. </body>
  181. </html>