瀑布流布局并自动加载实现代码_jquery

自从Pinterest使用了一种新的方式布局取得成功之后,从此互联网出现了布局潮流,我们把他叫做瀑布流!!在互联网流行起来,从国外到国内普遍存在。国内现有美丽说,蘑菇街,花瓣等代表的网站。

瀑布流是流行一段时间了,现在网上出现了很多的插件。使用起来更是非常的方便。目前用的非常多,并且有是一个juqery的插件masonry,插件地址:http://masonry.desandro.com/

先使用css把一个网页按照从上到下的方式布局好。
使用起来更是非常方便:

我先引用好jquery文件和masonry文件,使用如下代码:

复制代码 代码如下:

$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.content_box',
isFitWidth: true,//// 是否可调整大小 Boolean
isRTL:false ////使用从右到左的布局 Boolean
});
});

时间: 2024-10-21 08:13:24

瀑布流布局并自动加载实现代码_jquery的相关文章

CSS3轻松实现瀑布流布局与无限加载图片相册的教程

目录 一.pic1.html页面代码如下: 二.模拟数据库数据的实体类Photoes.cs代码如下: 三.服务器返回数据给客户端的一般处理程序Handler1.ashx代码如下: 四.示例下载: 五.了解更多瀑布流布局的的知识 首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head>     <metacharset="UTF-8">     &

jquery 页面滚动到底部自动加载插件集合_jquery

很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPagination jQuery ScrollPagination plugin 是一个 jQuery 实现的支持无限滚动加载数据的插件. 2. jQuery Screw Screw (scroll + view) 是一个 jQuery 插件当用户滚动页面的时候加载内容,是一个无限滚动翻页的插件. 3

Treegrid的动态加载实例代码_jquery

废话不多说了,直接给大家贴代码了. 具体代码如下所示: 1.前端 <%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <script type="text/javascript"> $(function() { $('#goods_type_treegrid').treegrid({

php自动加载的两种实现方法_php技巧

php自动载方法有两种. 第一种方案用__autoload,这个函数较简单,也较弱. 但有一问题没有解决, 就是在include前判断文件是否存在的问题. 复制代码 代码如下: set_include_path('aa' . PATH_SEPARATOR . get_include_path()); function __autoload($className) { //如果加这个检测, 因为此文件不在当前目录下,它就会检测不到文件存在, //但include是能成功的 if (file_exi

JavaScript实现图片自动加载的瀑布流效果_javascript技巧

先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边

代码-js 自动加载 函数 可以一性加载几个,并且是高效

问题描述 js 自动加载 函数 可以一性加载几个,并且是高效 我写了段代码,前台调用后台的数据,但是因为可以局部刷新,所以每个函数都分开写了!大约有9个函数,并且在点击页面时需要同时加载进来,所以写了一个自动加载函数,然后在自动加载函数中,分别条用这9个函数,但是当点击页面 加载时却有的加载很慢,有时却很快,数据库交互也时快时慢!!我想问下是不是我调用的太多了!? 解决方案 建议你优化一下,对于函数做一下合并,每次访问都是耗时和耗资源.会使加载变慢 解决方案二: 你使用ajax动态加载还是scr

infinitescroll瀑布流在运行之后 向下滚动没有出现自动加载,那位牛人给看看啊

问题描述 infinitescroll瀑布流在运行之后 向下滚动没有出现自动加载,那位牛人给看看啊 <br> var pageindex = 1;<br> var pagesize = 30;</p> <pre><code> function item_masonry() { $('.item img').load(function () { $('.infinite_scroll').masonry({ itemSelector: '.maso

JQuery实现滚动到页面底端时自动加载更多信息代码

类似微博,新浪新闻的评论等,都采用了这方法. 关键代码: var stop=true; $(window).scroll(function(){     totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());     if($(document).height() <= totalheight){         if(stop==true){             stop=false

php中使用__autoload()自动加载未定义类的实现代码_php技巧

下面是一段使用__autoload()的代码,供大家学习参考: 复制代码 代码如下: <?php/*** 自动加载相关类库文件*/function __autoload($classname){if(substr($classname,-6)=="Action"){include APP_PATH.'controllers/'.$classname.'.class.php';}elseif(substr($classname, -5)=="Model"){in