先科普下瀑布流吧 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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=$('...