查看“沙盒:瀑布流测试”的源代码

{{InfoBox||测试瀑布流}}
{{#vardefine:gridBs|col-md-3 col-sm-4 col-xs-6}}
<!-- {{#widget:Masonry}}
  <div class="grid row" data-masonry='{"columnWidth": ".grid-sizer", "itemSelector": ".grid-item","stagger":"0.03s"}'>
    <div class="grid-sizer {{#var:gridBs}}">1[[file:思念长图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">1[[file:思念长图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">2[[file:思念横图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">3[[file:思念长图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">4[[file:思念横图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">5[[file:思念长图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">6[[file:思念横图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">7[[file:思念长图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">8[[file:思念横图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">9[[file:思念长图-戮夜渡梦.png]]</div>
    <div class="grid-item {{#var:gridBs}}">10[[file:思念横图-戮夜渡梦.png]]</div>
  </div>
{{#CSS:
.grid-item{
border:1px solid;
padding:5px;
}
}} -->


{{#Widget:Waterfall}}{{#vardefine:divWidth|285px}}
<div class="waterfall-container">
    <div class="{{#var:gridBs}}" style="display:none;">1[[file:思念长图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}">2[[file:思念横图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}">3[[file:思念长图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}" style="display:none;">4[[file:思念横图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}">5[[file:思念长图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}">6[[file:思念横图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}">7[[file:思念长图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
    <div class="{{#var:gridBs}}">8[[file:思念横图-戮夜渡梦.png|{{#var:divWidth}}]]</div>
</div>
{{#css:
.waterfall-container > *{
border:1px solid;
padding:5px;
}
}}