• 瀑布流效果


    效果图

    html代码

     1 <div class="wrap">
     2         <div class="bigbox" id="bigbox">
     3         <!--每一小块开始-->
     4             <div class="listbox">
     5                 <div class="listbox-con">
     6                     <h2>图片介绍和描述</h2>
     7                     <p>此为介绍和描述</p>
     8                 </div>
     9             </div>
    10             <div class="listbox">
    11                 <div class="listbox-con">
    12                     <h2>图片介绍和描2述</h2>
    13                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述2</p>
    14                 </div>
    15             </div>
    16             <div class="listbox">
    17                 <div class="listbox-con">
    18                     <h2>图片介绍和描3述</h2>
    19                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述3</p>
    20                 </div>
    21             </div>
    22             <div class="listbox">
    23                 <div class="listbox-con">
    24                     <h2>图片介绍和描4述</h2>
    25                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述4</p>
    26                 </div>
    27             </div>
    28             <div class="listbox">
    29                 <div class="listbox-con">
    30                     <h2>图片介绍和描5述</h2>
    31                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述5</p>
    32                 </div>
    33             </div>
    34             <div class="listbox">
    35                 <div class="listbox-con">
    36                     <h2>图片介绍和描述</h2>
    37                     <p>此为介绍和描述</p>
    38                 </div>
    39             </div>
    40             <div class="listbox">
    41                 <div class="listbox-con">
    42                     <h2>图片介绍和描2述</h2>
    43                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述2</p>
    44                 </div>
    45             </div>
    46             <div class="listbox">
    47                 <div class="listbox-con">
    48                     <h2>图片介绍和描3述</h2>
    49                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述3</p>
    50                 </div>
    51             </div>
    52             <div class="listbox">
    53                 <div class="listbox-con">
    54                     <h2>图片介绍和描4述</h2>
    55                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述4</p>
    56                 </div>
    57             </div>
    58             <div class="listbox">
    59                 <div class="listbox-con">
    60                     <h2>图片介绍和描5述</h2>
    61                     <p>此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述此为介绍和描述5</p>
    62                 </div>
    63             </div>
    64             
    65         </div>
    66     </div>

    样式代码

    1 *{ margin:0px; padding:0px;}
    2 .wrap{ padding:15px;}
    3 .bigbox{ width:100%; position:relative;}
    4 .listbox{ width:23%; padding:1%; position:absolute; box-shadow:0 0 1px #CCC;}
    5 .listbox-con{ background:#fefefe;}
    6 .listbox-con h2{ font-size:16px; color:#333;}
    7 .listbox-con p{ font-size:14px; color:#666;}

    插件代码

     1 ;(function($){
     2     var defaults ={
     3         wflist:'.listbox'
     4     };
     5     $.fn.waterfal = function(opt){
     6         opt =$.extend({},defaults,opt);
     7         // 变量
     8         var obj = $(this);//当前对象
     9         
    10         var wfwidth = $(opt.wflist).outerWidth(true),
    11         minHeight = 0,
    12         maxcol=Math.floor($(window).width()/wfwidth);
    13         
    14         (function(wflist,maxcol,wfwidth,minHeight){
    15             var wfarr = new Array(),minHeight = 0,minCol=0;
    16             
    17             for(i=0;i<wflist.length;i++){
    18                 colHeight=wflist.eq(i).outerHeight(true);
    19                 if(i<maxcol){
    20                     wfarr[i] = colHeight;
    21                     wflist.eq(i).css({'top':0,left:i*wfwidth});
    22                 }else{
    23                     minHeight=Math.min.apply(null,wfarr);//
    24                     minCol = getArrayKey(wfarr, minHeight);
    25                     wfarr[minCol] += colHeight; //加上新高度后更新高度值
    26                     wflist.eq(i).css({"top":minHeight,left:minCol * wfwidth}); //先得到高度最小的Li,然后把接下来的li放到它的下面                
    27                 }
    28                 wflist.eq(i).attr('id',"post_"+i);                
    29             };
    30         })( $(opt.wflist),maxcol,wfwidth,minHeight);
    31         
    32         function getArrayKey(wfa,minh){//使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个)
    33             for( ind in wfa ) {
    34                 if( wfa[ind] == minh)  {
    35                     return ind;
    36                 }
    37             }
    38         };
    39         var wfAreaH = parseInt( $(opt.wflist).last().css("top")) + $(opt.wflist).last().outerHeight(true)+ "px"; //显示区域的高度为 最后一个元素的Top值+自身高度
    40         obj.css({ "width":wfwidth * maxcol,"height":wfAreaH }); //设置显示区域宽度和高度    
    41     }
    42 })(jQuery);
  • 相关阅读:
    flume+kafka (分区实现 默认单分区)
    flume+kafka (分区实现 默认单分区) (二)
    trident 序列号问题
    C#运动控制日志报警记录和操作记录记录查询(SqlLite数据库操作)
    C#运动控制运动暂停思路检测沿信号方法
    C#使用json配置文件方法【读写Json,适合小项目】
    C#NLog日志组件使用
    C#运动控制05实时报警及显示方案
    C#USB扫码枪实现无焦点状态下扫入
    C#运动控制05日志显示(ListView和imageList控件使用)
  • 原文地址:https://www.cnblogs.com/Vipming/p/rui_tu.html
Copyright © 2020-2023  润新知