$(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 //列与列之间的间距