先科普下瀑布流吧 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像美丽说、淘宝网都有使用。 这是我实现的一个效果，就是怎么滚动都加载不玩。就跟瀑布一样流啊流！这里的实现方式我们只说Js实现方法 实现原理： 对容器中...
由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了 html:*{padding: 0;margin:0;}#main{position: relative;}.pin{padding: 15px 0 0 15px;float:left;}.box{padding: 10px;border:1px solid #ccc;box-shadow: 0 0 6px #ccc;border-radius: 5px;}.box img{width:162px;height:auto;}JSWallper.js:window.onload=function(){waterfall('main','pin');var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src'...
瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局（基于多栏列表流体布局实现） javascript 瀑布流、各大瀑布流简析与建议 因为自己用jquery比较多，便萌生了把瀑布流做成插件的想法，图片就借用迅雷UED上的那些美图吧。先看看Demo 把代码放出来吧 代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:waterfall_column,//列的类名 column_space:10,//列间...
测试环境：ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度 代码如下: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> waterfall flow </ script> <BR><style type="text/css" > <BR>body{margin:0px;} <BR>#main{width:840px;margin:0 auto;} <BR>.flow{float:left;width:200px;margin:5px;background:#ABC;} <...
这样的布局并不陌生，从2011年Pinterest创立以来，中国互联网就迅速掀起了一股模仿Pinterest的热潮，国内有众多网站采用瀑布流的布局方式，例如花瓣网、美丽说等等。而事实上在中国互联网，模仿一些在国外被人看好的模式（当然，你也可以说是山寨或抄袭，呵呵！！）向来都是一个不错的idea。 OK，现在进入正题。这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(...
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。 我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了。 然后进入下一个循环插入下一行。公式很简单，假设这一行当前的高度为h，则插入一张高和宽为（x，y）的图片时，满足下列关系： h' * (w / h + y / x) = ...
下面奉上一则用JS实现瀑布流的方法，望批评。代码如下:瀑布流布局测试body { background-color: #eee; font-size: 84%; text-align: justify;}.column { display: inline-block; vertical-align: top;}.pic_a { display: block; padding: 5px; margin-bottom: 10px; border: 1px solid #ccc; background-color: #fff; text-decoration: none;}.pic_a img { display: block; margin: 0 auto...
插件下载：https://github.com/GBKS/Wookmark-jQuery官方主页：http://www.wookmark.com/jquery-plugin 下载插件后，在网页中引用插件的JS文件： 代码如下:HTML代码结构： 代码如下: 简单用法：在html文件中添加代码 代码如下: jQuery(function($){ $('#tiles li').wookmark(); });复杂一点的用法： 代码如下:jQuery(function($){ $('#tiles li').wookmark({ //这里是要实现瀑布流布局的对象 autoResize: true, //设置成t...
实现方法如下：（这里只发jquery了，相关html代码请各位自己脑补一下吧，我就不发了，哈哈）/*** 自动刷新* @type {*|jQuery|HTMLElement}*/ var $container = $('#main'); $container.imagesLoaded( function(){$container.masonry({itemSelector : '.item',columnWidth:205,gutterWidth:10,isAnimated: true}); }); var pre_href; //滚动 $(window).scroll(function(){// 当滚动到最底部以上100像素时， 加载新内容if ($(documen...
html代码：{#$item.title#}时 间：{#$item.start_date#}-{#$item.end_date#}地 点：{#$item.area_name#}{#$item.title#}时 间：{#$item.start_date#}-{#$item.end_date#}地 点：{#$item.area_name#}{#$item.title#}时 间：{#$item.start_date#}-{#$item.end_date#}地 点：{#$item.area_name#}上一页12下一页js代码$(window).load( function() {$('#kppcl').BlocksIt({numOfCol: 3,offsetX: 5,offsetY: 5});});va...
Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下：在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使...
HTML(注意包裹关系,方便js调用)代码如下:LESS(less预编译)代码如下:* {margin: 0;padding: 0;}#main {position: relative;}.box {padding:15px 0 0 15px;float:left;}.pic {padding: 10px;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0px 0px 5px #ccc;img {width:165px;height:auto;}}JavaScript(自己理解的注解) (函数存在一定瑕疵,仅用于学习理解)代码如下:window.onload = function () {waterfall("main","box");/...
分析：瀑布流，做法有2种 （1）绝对定位方案：每个单元格设置为绝对定位，通过计算，分别设置 top , left 即可实现 （2）浮动方案：弄N列布局（浮动），然后图片数据，按顺序依次插入，如N为3列 ，第一张图片插入到第一列，第二张图片插入到第二列，第三张图片插入到第三列，第四张图片插入到第一列........这样循环插入（不能自适应） CSS与HTML代码：代码如下:body,ul,li{margin:0;margin:0;}ul{list-style:none;}.clearfix:afte...
这几天看了Amy老师的用javascript实现瀑布流，我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕，以后改变窗口大小就不能做到自适应了。于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的，代码如下: window.onload=function(){//瀑布流函数waterfall(content,box);//模拟数据加载var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"...
本文实例讲述了js实现仿百度瀑布流的方法。分享给大家供大家参考。具体实现方法如下：仿百度图片瀑布流*{margin:0; padding:0;} #container{ width: 1000px; border:1px solid #f00; margin: 50px auto; position: relative; } #container img{ position: absolute; } #loader{ width: 100%; height: 60px; background: url(loader.gif) no-repeat center; position: fixed; bottom: 0; left: 0; }$(function(){var oContainer=$('...