推荐设备MORE

茂名企业网站建设企业—sai绘

茂名企业网站建设企业—sai绘

行业知识

jQuery Wookmark 流式布局合理布局软件

日期:2021-02-13
我要分享
jQuery Wookmark 瀑布流布局插件  点一下浏览  点一下免费下载  我想个人收藏  点个赞(4)

流式布局合理布局十分合适很多照片的展现,一改了去剪裁照片规格统一的排版设计,每一张照片都能彻底展现,并参差有致,令人眼下一亮。

留意事宜:

1.新项目中的 img 原素的 width 和 height 特性必须写,不然精准定位会禁止确。(能够用 JavaScript 即时获得照片的宽高,但照片总数过量时,这将是一件不可靠的事儿,假如你坚持要那么做,能够参照这一Demo)

【options 主要参数表明】


加载 JavaScript 文档

 script src= js/jquery.js /script   script src= js/jquery.wookmark.js /script  

CSS 款式

/* * 父器皿必须设定相对性精准定位 * 新项目必须设定掩藏 */ #list{position:relative;} #list li{display:none;} 

DOM 构造

 !-- 本例中,$( #list ) 便是父器皿,內部的 li 便是要开展流式布局合理布局的新项目。自然还可以应用 p 或别的标识的来写。 新项目中的 img 原素的 width 和 height 特性必须写,不然精准定位会禁止确。 --   ul id= list   li img src= pic_1.img  width= 200  height= 283 p text /p /li   li img src= pic_2.img  width= 200  height= 300 p text /p /li  ...  li img src= pic_n.img  width= 200  height= 252 p text /p /li   /ul  

启用 Wookmark

$( #list li ).wookmark({ container:$( #list ), offset:10, itemWidth:200 }); 

转截请标明:编码佳园 » jQuery Wookmark 流式布局合理布局软件