Jquery瀑布流插件使用介绍(2)

$(selector).waterfall(opt); //其中selector为瀑布流容器的选择器,opt为配置参数对象


所需的html结构:html结构可以就是一个空容器元素,如<div id=”container”></div>,里面的砖块元素通过动态加载进来。当然也可以预先放一些砖块进去,如demo页中的

复制代码 代码如下:


<div>
<div><img src="https://www.jb51.net/P_000.jpg" /><p>00</p></div>
<div><img src="https://www.jb51.net/P_001.jpg" /><p>01</p></div>
<div><img src="https://www.jb51.net/P_002.jpg" /><p>02</p></div>
<div><img src="https://www.jb51.net/P_003.jpg" /><p>03</p></div>
<div><img src="https://www.jb51.net/P_004.jpg" /><p>04</p></div>
<div><img src="https://www.jb51.net/P_005.jpg" /><p>05</p></div>
<div><img src="https://www.jb51.net/P_006.jpg" /><p>06</p></div>
<div><img src="https://www.jb51.net/P_007.jpg" /><p>07</p></div>
<div><img src="https://www.jb51.net/P_008.jpg" /><p>08</p></div>
<div><img src="https://www.jb51.net/P_009.jpg" /><p>09</p></div>
<div><img src="https://www.jb51.net/P_010.jpg" /><p>10</p></div>
<div><img src="https://www.jb51.net/P_011.jpg" /><p>11</p></div>
<div><img src="https://www.jb51.net/P_012.jpg" /><p>12</p></div>
<div><img src="https://www.jb51.net/P_013.jpg" /><p>13</p></div>
<div><img src="https://www.jb51.net/P_014.jpg" /><p>14</p></div>
<div><img src="https://www.jb51.net/P_015.jpg" /><p>15</p></div>
<div><img src="https://www.jb51.net/P_016.jpg" /><p>16</p></div>
<div><img src="https://www.jb51.net/P_017.jpg" /><p>17</p></div>
<div><img src="https://www.jb51.net/P_018.jpg" /><p>18</p></div>
<div><img src="https://www.jb51.net/P_019.jpg" /><p>19</p></div>
</div>

下面详细说下配置参数对象opt的各属性的作用及其默认值。

column_width:204  //瀑布流是由列组成的,该参数规定了每列的宽度,该参数会直接影响到瀑布流的列数

column_className:'waterfall_column'   //列的类名,便于自定义样式

column_space:10    //列与列之间的间距

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wddxpf.html