---
title: 瀑布流纯js实现
date: 2016-09-25 09:40:39
tags: [瀑布流,js,滚动]
categories: [图片,瀑布流]
permalink: jspubuliu
---
前言
瀑布流布局是网站比较流行的一种布局方式[Demo](http://api.sunkejava.com/Demo/pubuliu.html) ,本案例将深入讲解实现瀑布流布局的三大方式：JavaScript、jQurey和CSS3，学习如何用JavaScript方法实现图片的定位及排序、两种不同的方式对图片进行持续加载，以及CSS3中多栏布局怎么实现瀑布流布局。
---
![demoimage][1]
[1]: http://ww1.sinaimg.cn/large/a24d4f55jw1f9gzqiuoiqj21d60odwt3.jpg
### html页面
瀑布流html页面实现:
瀑布流测试
### js代码
window.onload=function(){
waterfall('main','box');
var dataInt = {"data":[{"src":"bg-1.jpg"},{"src":"bg-2.jpg"},{"src":"bg-3.jpg"},{"src":"bg-4.jpg"},{"src":"bg-5.jpg"},{"src":"bg-6.jpg"},{"src":"bg-7.jpg"},{"src":"bg-8.jpg"},{"src":"bg-9.jpg"},{"src":"bg-10.jpg"},{"src":"bg-11.jpg"},{"src":"bg-12.jpg"},{"src":"bg-13.jpg"},{"src":"bg-14.jpg"},{"src":"bg-15.jpg"},{"src":"bg-16.jpg"}]};
window.onscroll = function(){
if(checkScrollSlide()){
var oParent = document.getElementById('main');
//渲染数据
for(var i = 0;i Demo所需图片自行寻找改名即可
> 有什么留言或问题直接在文末留下评论即可。
### 欢迎访客:
