参数说明
| data-type | 布局方式(horizontal/vertical) 默认纵向布局 |
| data-margin | 每个item的间隔(右/下) |
| data-wrap | 不等分时候设置外层占比(从0开始),多个用分号隔开 |
| data-item | 不等分时候设置内层占比(从0开始),多个用分号隔开 |
| data-minscroll | 显示小型滚动条(默认显示原始宽度的)(可以值(show/hide)) |
| data-height | 是否设置高度,默认设置(传值auto不设置) |
| 把jk-layout包裹在一个有宽高(可以设置固定值也可以用绝对定位实现)的块里面即可实现布局,可以随意设置几行几列,除了设置占比以外的都是等分剩余的宽高,把内容包裹在.jk-layout-content类(即设置在从jk-layout开始下数第四层(索引为3))里面配合data-minscroll可以实现固定高度并且有滚动条时候滚动条很窄(做决策大屏的时候窄滚动条看起来更好),当然也可以用嵌套实现固定高度有头部和尾部类似效果的布局,data-height属性一般用在网页布局用,其他一般都是设置或者定位一个高度出来不理会此属性;纵向布局时候在item层设置左右属性不会影响,其他布局要设置属性就需要用个div包裹起来然后设置在这个div上(不考虑兼容性的只要添加box-sizing就可以随便设置了) | |
| 配置说明:data-wrap="1:300px;2:20%",表示第1个是固定值,第2个是百分比,剩余平分,data-item同理 | |
3*3等宽等高布局(纵向布局)(第一个设置了边框和填充)(相当于可以实现栅格布局,但是能实现的布局格式更多)
3*3不规则布局,只是例子,所以样式用了内嵌样式,实际可用更多的调整
3*3等宽等高布局(横向布局)
随意调整宽高
嵌套布局
