您现在的位置： 365建站网 > 365文章 > jquery和css中瀑布流布局的实现方法

jquery和css中瀑布流布局的实现方法

文章来源：365jz.com     点击数：400    更新时间：2018-10-23 11:59   参与评论

一. js中瀑布流布局的实现方法

  今天记录的是我毕设中着重体现的布局风格--瀑布流布局。

      说到瀑布流布局，先上张图片来说明一下什么是瀑布流好了。

QQ截图20150315171940

      这个是我毕设中的一个截图（内容是我暂时从其他网站上爬下来测试的….），那么我们从这张图片中就能看到大致来说瀑布流就是一些等宽不等高的图片来排列展示的，因为每张图片都不一样大，以及我在图片下面展示了各种信息都不一样，所以导致这些展示的框它们的高度都不统一，那么为什么却要要求它们之间的宽度相同呢？这就是瀑布流实现的关键了。

      那么我们就来一步步的说明它是如何实现的，这个过程中也就理解了为什么是这样设计的了，首先，我们要在页面中排列出所要展示的框的个数，下面是这个瀑布流的结构图：

QQ截图20150315173751

      这张图片中白色的部分我们就当作是浏览器的可视区域了，那么中间这个灰色的部分我给他取名叫做‘main’，用来存放中间展示的图片，并且与页面中的其他元素分开，那么第一个问题就来了，我们如何知道在这个main中到底改放几张图片呢？而且这个main的宽度又该怎么定呢？上代码！

</>code
  1. #main{
  2.     position: relative; text-align: center; margin: 0 auto;
  3. }

     我们先给它设置一下相对定位，并将这个div设置成居中，这里有个地方要注意的是，之前看了很多例子使用 text-align: center 将div居中后发现并不起效，那是因为在设置text-align的同时并没有指定它的margin值，我们要将margin值也同时设置了之后居中的效果才会生效，因为要和页面顶部的导航栏配合，所以我在这里将margin的第一个值设置为0，第二个设置为自动（auto），为什么这么设置呢？

     margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。在这里要注意一下的是在css中，margin和padding这样的属性设置值的时候都是顺时针设置的，也就是上，右，下，左，这个顺序来的。

      那么当margin的值为四个的时候这4个的值依次为：上外边距，右外边距，下外边距，左外边距。

      当为三个值的时候顺序依次为：上外边距，左右外边距，下外边距。

      当为两个值的时候顺序依次为：上下外边距，左右外边距。

      当为一个值的时候就是全部的外边距了。

      现在我们就要开始放图片了，这也就是为什么我们要使用等宽的图片了，因为宽度固定我们才能动态的算出不同大小的浏览器能放几张图片来展示了。

     这里我并没有先设置main的宽度，而是在计算出放置几张图片之后才设置它的宽度，因为我们不仅仅是展示图片，还有图片下面的内容，所以在计算每张图片的宽度的时候要将包裹图片的容器也算进来，也就是上面图片中红色框的宽度，而且由于每个展示框之间还有margin值，所以我们在计算的时候也是要考虑的，因为我使用的是jquery，所以在这里我通过 outerWidth() 方法来取得宽度值。

</>code
  1. //动态添加瀑布图片的功能函数
  2. function waterfall(){
  3.     //取得展示框对象
  4.     var $boxs = $( "#main>div" );
  5.     // 一个块框的宽
  6.     var w = $boxs.eq( 0).outerWidth();
  7.     //每行中能容纳的展示框个数【窗口宽度除以一个块框宽度】
  8.     var cols = Math.floor( ($( window ).width()-30) / w );
  9.     //给最外围的main元素设置宽度和外边距
  10.     $('#main').width(w*cols).css('margin','o auto');
  11.     //用于存储 每列中的所有块框相加的高度。
  12.     var hArr=[];
  13.     $boxs.each( function( index, value ){
  14.         var h = $boxs.eq( index).outerHeight();
  15.         if( index < cols ){
  16.             hArr[ index ] = h; //第一行中的num个块框 先添加进数组HArr
  17.         }else{
  18.             var minH = Math.min.apply( null, hArr );//数组HArr中的最小值minH
  19.             var minHIndex = $.inArray( minH, hArr );
  20.             $( value).css({
  21.                 'position':'absolute','top':minH+'px', 'left':minHIndex*w + 'px'
  22.             });
  23.             //数组 最小高元素的高 + 添加上的展示框[i]块框高
  24.             hArr[ minHIndex ] += $boxs.eq( index).outerHeight();//更新添加了块框后的列高
  25.         }
  26.     });
  27. }

     这里的思路就是先取得浏览器的可视宽度，然后通过除以每个展示框的宽度来计算出一排可以展示多少个展示框的，然后通过一个数组 hArr来保持每一列的高度，我在这里使用jquery中的each方法来循环保存每一列的高度，这里传入的两个参数，index是展示框的索引号，value为这个展示框的jquery对象。

     首先根据索引号来取到对应展示框的高度，这个高度是包含了margin的全部宽度，然后将这个值保存在数组中，由于之前求出了每一行最多的块数，所以在这里进行一个判断，将第一行首先填满，然后开始填充第二排的展示框，我使用Math.min.apply()方法来取得数组中的最小值，然后通过jquery提供的 inArray() 方法来取得最小值所在的是哪一列，第一个参数是最小值，第二个参数是需要判断的数组，然后我们将对应的展示框填充进去，最后将新加入的展示框的完整高度加上之前最小的高度重新保存到数组中，继续循环判断，从而不断的新增展示框。

      那么现在我们就要通过后台传来的json数据动态的生成新的展示框来提供添加了，因为每个项目所要展示的内容都不一样，我在这里就不展示具体的代码 了，接下来就是要通过监听滚动条的滑动来判断什么时候开始动态添加新展示框了。

      接下来我就讲一下我判断的思路，首先是在第一组展示框添加完成后取得最后一个展示框的填充高度，然后加上这个展示框自身高度的一边，因为我觉得用户一般会浏览到最后一个的附近的时候就该开始动态填充了，所以我在这里就判断当前滚动条滚动的距离是不是大于页面默认的高度加上最后一个展示框到屏幕顶端的高度，如果大于了说明就该继续填充展示框了：

</>code
  1. //监听滚动条
  2.     window.onscroll=function(){
  3.         if(checkscrollside()){
  4.             AddWaterfall
  5. (dataInt);//这个是动态填充新展示框的函数
  6.             waterfall();
  7.         };
  8.     }
  9. //判断是否需要继续加载瀑布流
  10. function checkscrollside(){
  11.     var $lastBox = $('#main>div').last();
  12.     var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);
  13.     var scrollTop = $(window).scrollTop();
  14.     var documentH = $(window).height();
  15.     return (lastBoxDis<scrollTop+documentH)?true:false;
  16. }

       现在整个瀑布流的展示就完成了，今天在这里记录下来，留已备用。


二.CSS实现瀑布流等分布局效果，兼容各大主流浏览器

效果如下：

1540267692275909.jpg

代码：

</>code
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>首页</title>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <style>
  9.         body{background:#eee;}
  10.         *{padding:0;margin:0;}
  11.         .main{width:1200px;margin:50px auto;}
  12.         .main::after{content:"";display:block;clear:both;}
  13.         .main .column-item{width:1200px;}/*不用设置高度*/
  14.         .main .mg0{margin-right:0;}
  15.         .main .column-item .box{float:left;width:292px;/*=(1200-30)/4 = 292.5*/padding:0 5px;}/*关键点，因为column-item不设置高度，所以只要设置float:left;那么所有的box就会向左边浮动，得到所需的4分列效果*/
  16.         .main .column-item .pl0{padding-left:0;}/*头尾两边都要清掉相应以便的padding,不然不会得到4分等列效果*/
  17.         .main .column-item .prl0{padding-right:0;}
  18.         .footer{height:50px;width:1200px;margin:50px auto;background:blue;clear:both;font-size:40px;color:#fff;text-align: center;}
  19.     </style>
  20. </head>
  21. <body>
  22.     <div>
  23.         <div>
  24.             <div class="box pl0">
  25.                 <div style="height:150px;background:blue;">1</div>
  26.                 <div style="height:110px;background:rgb(12, 192, 192);margin-top:10px;">2</div>
  27.             </div>
  28.         </div>
  29.         <div>
  30.             <div>
  31.                 <div style="height:170px;background:rgb(133, 12, 106);">2</div>
  32.                 <div style="height:60px;background:rgb(212, 149, 12);margin-top:10px;">1</div>
  33.             </div>
  34.         </div>
  35.         <div>
  36.             <div>
  37.                 <div style="height:55px;background:red;">2</div>
  38.                 <div style="height:240px;background:pink;margin-top:10px;">3</div>
  39.             </div>
  40.         </div>
  41.         <div class="column-item mg0">
  42.             <div class="box prl0">
  43.                 <div style="height:75px;background:green;">3</div>
  44.                 <div style="height:123px;background:pink;margin-top:10px;">3</div>
  45.             </div>
  46.         </div>
  47.     </div>
  48.     <div>footer</div>
  49. </body>
  50. </html>

总结：


实现相应的效果关键点在两点


1、.main .column-item{width:1200px;}/不用设置高度/，因为不设置高度，所以说4个.main .column-item都会叠加在一起

2、.main .column-item .box{float:left;}因为设置了左浮动，所以设置相应的等分，就会出现4个等分布局的情况，至于为什么，得好好去理解float的原理 推介看下 float属性的理解

3、.main .column-item .pl0{padding-left:0;} .main .column-item .prl0{padding-right:0;}/头尾两边都要清掉相应以便的padding,不然不会得到4分等列效果/


三.简单实用的jQuery响应式网格瀑布流布局

html代码：

</>code
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>简单实用的jQuery响应式网格瀑布流布局-365建站</title>
  8. <link rel="stylesheet" type="text/css" href="css/styles.css">
  9. <!--[if IE]>
  10. <script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  11. <![endif]-->
  12. </head>
  13. <body>
  14. <article>
  15. <header>
  16. <h1>简单实用的jQuery响应式网格瀑布流布局插件 <span>A Pinterest-like Responsive Grid System with jQuery </span></h1>
  17. <div>
  18. <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
  19. <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/pubuliuchajian/201509222604.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
  20. </div>
  21. </header>
  22. <div>
  23.   <a href="#">
  24.     <img src="img/1.jpg" />
  25.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  26.   </a>
  27.   <div>
  28.     <img src="img/2.jpg" />
  29.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  30.   </div>
  31.   <div>
  32.     <img src="img/3.jpg" />
  33.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  34.   </div>
  35.   <div>
  36.     <img src="img/4.jpg" />
  37.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  38.   </div>
  39.   <div>
  40.     <img src="img/5.jpg" />
  41.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  42.   </div>
  43.   <div>
  44.     <img src="img/6.jpg" />
  45.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  46.   </div>
  47.   <div>
  48.     <img src="img/7.jpg" />
  49.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  50.   </div>
  51.   <div>
  52.     <img src="img/8.jpg" />
  53.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  54.   </div>
  55.   <div>
  56.     <img src="img/9.jpg" />
  57.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  58.   </div>
  59.   <div>
  60.     <img src="img/10.jpg" />
  61.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  62.   </div>
  63.   <div>
  64.     <img src="img/11.jpg" />
  65.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  66.   </div>
  67.   <div>
  68.     <img src="img/12.jpg" />
  69.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  70.   </div>
  71.   <div>
  72.     <img src="img/13.jpg" />
  73.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  74.   </div>
  75.   <div>
  76.     <img src="img/14.jpg" />
  77.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  78.   </div>
  79.   <div>
  80.     <img src="img/15.jpg" />
  81.     <h2>Cursus cursus proin auctor in in ac, nunc, tortor</h2>
  82.   </div>
  83. </div>
  84. </article>
  85. <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
  86. <script type="text/javascript" src="js/jaliswall.js"></script>
  87. <script type="text/javascript">
  88. $(function(){
  89. $('.wall').jaliswall({ item: '.article' });
  90. });
  91. </script>
  92. </body>
  93. </html>

css代码：

</>code
  1. article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
</>code
  1. @font-face {
  2. font-family: 'icomoon';
  3. src:url('../fonts/icomoon.eot?rretjt');
  4. src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
  5. url('../fonts/icomoon.woff?rretjt') format('woff'),
  6. url('../fonts/icomoon.ttf?rretjt') format('truetype'),
  7. url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
  8. font-weight: normal;
  9. font-style: normal;
  10. }
  11. [class^="icon-"], [class*=" icon-"] {
  12. font-family: 'icomoon';
  13. speak: none;
  14. font-style: normal;
  15. font-weight: normal;
  16. font-variant: normal;
  17. text-transform: none;
  18. line-height: 1;
  19. /* Better Font Rendering =========== */
  20. -webkit-font-smoothing: antialiased;
  21. -moz-osx-font-smoothing: grayscale;
  22. }
  23. body, html { font-size: 100%; 
  24. padding: 0; margin: 0;}
  25. /* Reset */
  26. *,
  27. *:after,
  28. *:before {
  29. -webkit-box-sizing: border-box;
  30. -moz-box-sizing: border-box;
  31. box-sizing: border-box;
  32. }
  33. /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  34. .clearfix:before,
  35. .clearfix:after {
  36. content: " ";
  37. display: table;
  38. }
  39. .clearfix:after {
  40. clear: both;
  41. }
  42. body{
  43. background: #f9f7f6;
  44. color: #404d5b;
  45. font-weight: 500;
  46. font-size: 1.05em;
  47. font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
  48. }
  49. a{color: #2fa0ec;text-decoration: none;outline: none;}
  50. a:hover,a:focus{color:#74777b;}
  51. .htmleaf-container{
  52. margin: 0 auto;
  53. text-align: center;
  54. overflow: hidden;
  55. }
  56. .htmleaf-content {
  57. font-size: 150%;
  58. padding: 1em 0;
  59. }
  60. .htmleaf-content h2 {
  61. margin: 0 0 2em;
  62. opacity: 0.1;
  63. }
  64. .htmleaf-content p {
  65. margin: 1em 0;
  66. padding: 5em 0 0 0;
  67. font-size: 0.65em;
  68. }
  69. .bgcolor-1 { background: #f0efee; }
  70. .bgcolor-2 { background: #f9f9f9; }
  71. .bgcolor-3 { background: #e8e8e8; }/*light grey*/
  72. .bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
  73. .bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
  74. .bgcolor-6 { background: #2fa8ec; }/*sky blue*/
  75. .bgcolor-7 { background: #d0d6d6; }/*White tea*/
  76. .bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
  77. .bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
  78. .bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
  79. .bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
  80. .bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
  81. /* Header */
  82. .htmleaf-header{
  83. padding: 1em 190px 1em;
  84. letter-spacing: -1px;
  85. text-align: center;
  86. }
  87. .htmleaf-header h1 {
  88. font-weight: 600;
  89. font-size: 2em;
  90. line-height: 1;
  91. margin-bottom: 0;
  92. font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
  93. }
  94. .htmleaf-header h1 span {
  95. font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
  96. display: block;
  97. font-size: 60%;
  98. font-weight: 400;
  99. padding: 0.8em 0 0.5em 0;
  100. color: #c3c8cd;
  101. }
  102. /*nav*/
  103. .htmleaf-demo a{color: #1d7db1;text-decoration: none;}
  104. .htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
  105. .htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
  106. .htmleaf-demo a:hover{opacity: 0.6;}
  107. .htmleaf-demo a.current{background:#1d7db1;color: #fff; }
  108. /* Top Navigation Style */
  109. .htmleaf-links {
  110. position: relative;
  111. display: inline-block;
  112. white-space: nowrap;
  113. font-size: 1.5em;
  114. text-align: center;
  115. }
  116. .htmleaf-links::after {
  117. position: absolute;
  118. top: 0;
  119. left: 50%;
  120. margin-left: -1px;
  121. width: 2px;
  122. height: 100%;
  123. background: #dbdbdb;
  124. content: '';
  125. -webkit-transform: rotate3d(0,0,1,22.5deg);
  126. transform: rotate3d(0,0,1,22.5deg);
  127. }
  128. .htmleaf-icon {
  129. display: inline-block;
  130. margin: 0.5em;
  131. padding: 0em 0;
  132. width: 1.5em;
  133. text-decoration: none;
  134. }
  135. .htmleaf-icon span {
  136. display: none;
  137. }
  138. .htmleaf-icon:before {
  139. margin: 0 5px;
  140. text-transform: none;
  141. font-weight: normal;
  142. font-style: normal;
  143. font-variant: normal;
  144. font-family: 'icomoon';
  145. line-height: 1;
  146. speak: none;
  147. -webkit-font-smoothing: antialiased;
  148. }
  149. /* footer */
  150. .htmleaf-footer{width: 100%;padding-top: 10px;}
  151. .htmleaf-small{font-size: 0.8em;}
  152. .center{text-align: center;}
  153. /****/
  154. .related {
  155. color: #fff;
  156. background: #333;
  157. text-align: center;
  158. font-size: 1.25em;
  159. padding: 0.5em 0;
  160. overflow: hidden;
  161. }
  162. .related > a {
  163. vertical-align: top;
  164. width: calc(100% - 20px);
  165. max-width: 340px;
  166. display: inline-block;
  167. text-align: center;
  168. margin: 20px 10px;
  169. padding: 25px;
  170. font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
  171. }
  172. .related a {
  173. display: inline-block;
  174. text-align: left;
  175. margin: 20px auto;
  176. padding: 10px 20px;
  177. opacity: 0.8;
  178. -webkit-transition: opacity 0.3s;
  179. transition: opacity 0.3s;
  180. -webkit-backface-visibility: hidden;
  181. }
  182. .related a:hover,
  183. .related a:active {
  184. opacity: 1;
  185. }
  186. .related a img {
  187. max-width: 100%;
  188. opacity: 0.8;
  189. border-radius: 4px;
  190. }
  191. .related a:hover img,
  192. .related a:active img {
  193. opacity: 1;
  194. }
  195. .related h3{font-family: "Microsoft YaHei", sans-serif;}
  196. .related a h3 {
  197. font-weight: 300;
  198. margin-top: 0.15em;
  199. color: #fff;
  200. }
  201. /* icomoon */
  202. .icon-htmleaf-home-outline:before {
  203. content: "\e5000";
  204. }
  205. .icon-htmleaf-arrow-forward-outline:before {
  206. content: "\e5001";
  207. }
  208. @media screen and (max-width: 50em) {
  209. .htmleaf-header {
  210. padding: 3em 10% 4em;
  211. }
  212. .htmleaf-header h1 {
  213.         font-size:2em;
  214.     }
  215. }
  216. @media screen and (max-width: 40em) {
  217. .htmleaf-header h1 {
  218. font-size: 1.5em;
  219. }
  220. }
  221. @media screen and (max-width: 30em) {
  222.     .htmleaf-header h1 {
  223.         font-size:1.2em;
  224.     }
  225. }
</>code
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. body {
  6.   font-family: sans-serif;
  7.   margin: 24px;
  8.   background: #f0f0f0;
  9.   color: #505050;
  10. }
  11. a {
  12.   text-decoration: none;
  13.   color: black;
  14. }
  15. .article {
  16.   display: block;
  17.   margin: 0 0 30px 0;
  18.   padding: 12px;
  19.   background: white;
  20.   border-radius: 3px;
  21.   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  22.   transition: all 220ms;
  23. }
  24. .article:hover {
  25.   box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
  26.   transform: translateY(-5px);
  27.   transition: all 220ms;
  28. }
  29. .article > img {
  30.   display: block;
  31.   width: 100%;
  32.   margin: 0 0 24px 0;
  33. }
  34. .article h2 {
  35.   text-align: center;
  36.   font-size: 14px;
  37.   text-transform: uppercase;
  38.   margin: 0 0 12px 0;
  39. }
  40. .wall {
  41.   display: block;
  42.   position: relative;
  43. }
  44. .wall-column {
  45.   display: block;
  46.   position: relative;
  47.   /*width: 33.333333%;*/
  48.   width: 25%;
  49.   float: left;
  50.   padding: 0 12px;
  51.   box-sizing: border-box;
  52. }
  53. @media (max-width: 640px) {
  54.   .wall-column {
  55.     width: 50%;
  56.   }
  57. }
  58. @media (max-width: 480px) {
  59.   .wall-column {
  60.     width: auto;
  61.     float: none;
  62.   }
  63. }


js代码：

</>code
  1. "use strict";"object"!=typeof window.CP&&(window.CP={}),window.CP.PenTimer={programNoLongerBeingMonitored:!1,timeOfFirstCallToShouldStopLoop:0,_loopExits:{},_loopTimers:{},START_MONITORING_AFTER:2e3,STOP_ALL_MONITORING_TIMEOUT:5e3,MAX_TIME_IN_LOOP_WO_EXIT:2200,exitedLoop:function(o){this._loopExits[o]=!0},shouldStopLoop:function(o){if(this.programKilledSoStopMonitoring)return!0;if(this.programNoLongerBeingMonitored)return!1;if(this._loopExits[o])return!1;var t=this._getTime();if(0===this.timeOfFirstCallToShouldStopLoop)return this.timeOfFirstCallToShouldStopLoop=t,!1;var i=t-this.timeOfFirstCallToShouldStopLoop;if(i<this.START_MONITORING_AFTER)return!1;if(i>this.STOP_ALL_MONITORING_TIMEOUT)return this.programNoLongerBeingMonitored=!0,!1;try{this._checkOnInfiniteLoop(o,t)}catch(n){return this._sendErrorMessageToEditor(),this.programKilledSoStopMonitoring=!0,!0}return!1},_sendErrorMessageToEditor:function(){try{if(this._shouldPostMessage()){var o={action:"infinite-loop",line:this._findAroundLineNumber()};parent.postMessage(JSON.stringify(o),"*")}else this._throwAnErrorToStopPen()}catch(t){this._throwAnErrorToStopPen()}},_shouldPostMessage:function(){return document.location.href.match(/boomerang/)},_throwAnErrorToStopPen:function(){throw"We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io."},_findAroundLineNumber:function(){var o=new Error,t=0;if(o.stack){var i=o.stack.match(/boomerang\S+:(\d+):\d+/);i&&(t=i[1])}return t},_checkOnInfiniteLoop:function(o,t){if(!this._loopTimers[o])return this._loopTimers[o]=t,!1;var i=t-this._loopTimers[o];if(i>this.MAX_TIME_IN_LOOP_WO_EXIT)throw"Infinite Loop found on loop: "+o},_getTime:function(){return+new Date}},window.CP.shouldStopExecution=function(o){return window.CP.PenTimer.shouldStopLoop(o)},window.CP.exitedLoop=function(o){window.CP.PenTimer.exitedLoop(o)};
  2. (function ($) {
  3.     $.fn.jaliswall = function (options) {
  4.         this.each(function () {
  5.             var defaults = {
  6.                 item: '.wall-item',
  7.                 columnClass: '.wall-column',
  8.                 resize: true
  9.             };
  10.             var prm = $.extend(defaults, options);
  11.             var container = $(this);
  12.             var items = container.find(prm.item);
  13.             var elemsDatas = [];
  14.             var columns = [];
  15.             var nbCols = getNbCols();
  16.             init();
  17.             function init() {
  18.                 nbCols = getNbCols();
  19.                 recordAndRemove();
  20.                 print();
  21.                 if (prm.resize) {
  22.                     $(window).resize(function () {
  23.                         if (nbCols != getNbCols()) {
  24.                             nbCols = getNbCols();
  25.                             setColPos();
  26.                             print();
  27.                         }
  28.                     });
  29.                 }
  30.             }
  31.             function getNbCols() {
  32.                 var instanceForCompute = false;
  33.                 if (container.find(prm.columnClass).length == 0) {
  34.                     instanceForCompute = true;
  35.                     container.append('<div class=\'' + parseSelector(prm.columnClass) + '\'></div>');
  36.                 }
  37.                 var colWidth = container.find(prm.columnClass).outerWidth(true);
  38.                 var wallWidth = container.innerWidth();
  39.                 if (instanceForCompute)
  40.                     container.find(prm.columnClass).remove();
  41.                 return Math.round(wallWidth / colWidth);
  42.             }
  43.             function recordAndRemove() {
  44.                 items.each(function (index) {
  45.                     var item = $(this);
  46.                     elemsDatas.push({
  47.                         content: item.html(),
  48.                         class: item.attr('class'),
  49.                         href: item.attr('href'),
  50.                         id: item.attr('id'),
  51.                         colid: index % nbCols
  52.                     });
  53.                     item.remove();
  54.                 });
  55.             }
  56.             function setColPos() {
  57.                 for (var i in elemsDatas) {
  58.                     if (window.CP.shouldStopExecution(1)) {
  59.                         break;
  60.                     }
  61.                     elemsDatas[i].colid = i % nbCols;
  62.                 }
  63.                 window.CP.exitedLoop(1);
  64.             }
  65.             function parseSelector(selector) {
  66.                 return selector.slice(1, selector.length);
  67.             }
  68.             function print() {
  69.                 var tree = '';
  70.                 for (var i = 0; i < nbCols; i++) {
  71.                     if (window.CP.shouldStopExecution(2)) {
  72.                         break;
  73.                     }
  74.                     tree += '<div class=\'' + parseSelector(prm.columnClass) + '\'></div>';
  75.                 }
  76.                 window.CP.exitedLoop(2);
  77.                 container.html(tree);
  78.                 for (var i in elemsDatas) {
  79.                     var html = '';
  80.                     var content = elemsDatas[i].content != undefined ? elemsDatas[i].content : '';
  81.                     var href = elemsDatas[i].href != href ? elemsDatas[i].href : '';
  82.                     var classe = elemsDatas[i].class != undefined ? elemsDatas[i].class : '';
  83.                     var id = elemsDatas[i].id != undefined ? elemsDatas[i].id : '';
  84.                     if (elemsDatas[i].href != undefined) {
  85.                         html += '<a ' + getAttr(href, 'href') + ' ' + getAttr(classe, 'class') + ' ' + getAttr(id, 'id') + '>' + content + '</a>';
  86.                     } else {
  87.                         html += '<div ' + getAttr(classe, 'class') + ' ' + getAttr(id, 'id') + '>' + content + '</a>';
  88.                     }
  89.                     container.children(prm.columnClass).eq(i % nbCols).append(html);
  90.                 }
  91.             }
  92.             function getAttr(attr, type) {
  93.                 return attr != undefined ? type + '=\'' + attr + '\'' : '';
  94.             }
  95.         });
  96.         return this;
  97.     };
  98. }(jQuery));


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (400人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号