这几天看了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...
分析：瀑布流，做法有2种 （1）绝对定位方案：每个单元格设置为绝对定位，通过计算，分别设置 top , left 即可实现 （2）浮动方案：弄N列布局（浮动），然后图片数据，按顺序依次插入，如N为3列 ，第一张图片插入到第一列，第二张图片插入到第二列，第三张图片插入到第三列，第四张图片插入到第一列........这样循环插入（不能自适应） CSS与HTML代码：代码如下:body,ul,li{margin:0;margin:0;} ul{list-style:none;} .cle...
HTML(注意包裹关系,方便js调用)代码如下: <body> <div id="main"> <div class="box"> <div class="pic"> <img src="images/0.jpg" alt=""> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg" alt=""> </div> </div> <div class="box"> <div c...
Masonry是 一款非常强大的jQuery动态网格布局插件，可以帮助开发人员快速开发类似剪贴画的界面效果。和CSS中float的效果不太一样的地方在 于，float先水平排列，然后再垂直排列，使用Masonry则垂直排列元素，然后将下一个元素放置到网格中的下一个开发区域。这种效果可以最小化处理 不同高度的元素在垂直方向的间隙。如下：在上图中大家可以看到，在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大，而使...
实现方法如下：（这里只发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 ($(document)....
html代码： <div style="width:1000px; overflow:hidden; margin:0 auto"> <div class="kppcl" style="width:1008px; position:relative" id="kppcl"><div class="kppcld"><div class="kppcld_t"><div class="kpic"><a href={#url_reset("activity/detail","id_{#$item.id#}")#}><img src="{#$item.logo#}" width="322" /></a></div><div class="kname"><a href={#url_reset("activity/detail","id_{#$item.id#}")#}>{#$item.titl...
插件下载：https://github.com/GBKS/Wookmark-jQuery官方主页：http://www.wookmark.com/jquery-plugin 下载插件后，在网页中引用插件的JS文件： 代码如下:<script src="jquery-1.8.2.min.js"></script><script src="jquery.wookmark.min.js"></script>HTML代码结构： 代码如下:<div id="main"> <ul id="tiles"> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> </ul>...
下面奉上一则用JS实现瀑布流的方法，望批评。代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>瀑布流布局测试</title><style>body { background-color: #eee; font-size: 84%; text-align: justif...
用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。 我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了。 然后进入下一个循环插入下一行。公式很简单，假设这一行当前的高度为h，则插入一张高和宽为（x，y）的图片时，满足下列关系： h' * (w / h + y / x) = ...
这样的布局并不陌生，从2011年Pinterest创立以来，中国互联网就迅速掀起了一股模仿Pinterest的热潮，国内有众多网站采用瀑布流的布局方式，例如花瓣网、美丽说等等。而事实上在中国互联网，模仿一些在国外被人看好的模式（当然，你也可以说是山寨或抄袭，呵呵！！）向来都是一个不错的idea。 OK，现在进入正题。这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(...
测试环境：ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中，瀑布流的分页可以以多页（比如5页）为单位二次分页，这样可以减少后台算法的复杂度 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>waterfall flow</title> <scri...
瀑布流布局浅析 浅谈个人在瀑布流网页的实现中遇到的问题和解决方法 折腾:瀑布流布局（基于多栏列表流体布局实现） javascript 瀑布流、各大瀑布流简析与建议 因为自己用jquery比较多，便萌生了把瀑布流做成插件的想法，图片就借用迅雷UED上的那些美图吧。先看看Demo 把代码放出来吧 代码如下:;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:waterfall_column,//列的类名 column_space:10,//列间...
瀑布流布局中的图片有一个核心特点—等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。本文主要和大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解，对此有兴趣的读者们参考学习下吧，希望能帮助到大家。基础功能实现首先我们定义好一个有 20 张图片的容器，<body><style>#waterfall {position: relative;}.waterfall-box {float: left;width: 200px;}</style> </body> <p id="waterf...
最近在做一个小程序项目，在 UI 上借鉴了一下其他 App 设计，其中有一个图片横向布局铺满的 UI 感觉挺好看的，类似于传统的瀑布流布局横过来一样。于是就自己实现了一下，并且将原本的横向两张图的方法扩展了下，改成了可以自定义显示张数的方法。下面是基本的显示效果：单行显示两张图单行显示五张图下面先说说写这个方法时的思路：效果分析可以看到在上图中，单行不管显示几张图片，都几乎能够保证图片被完整显示出来，并且每一行...
什么是图片瀑布流用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子：简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。实现原理1、第一种方式第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小）通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。【相关课程推荐：JavaScr...