jQuery Masonry构建pinterest网站布局注意要点(转)

在愚人码头的博客上看到有关于如何构建pinterest网站的文章，其实就是“图片瀑布流显示”，我试着在本地做了一个，没有什么问题，但是放到公司的网站上就问题多多。一是定位不准确，二是图片显示不完整。但是重新改变下窗口大小，显示和位置都正常了，这说明第一次加载的时候，算的值不准，第一想到这个是加载顺序的问题。想了个土方法，在body里加了onload，确实解决了第一次加载页面显示的问题，点击显示更多图片的时候，出来的效果还是算错的，最后的解决办法是给每个图片加上宽高，因为图片都是从后来截取的，宽高都有数据。这个库的应用可以参照码头的：点击

然后我再自己写了一个根据屏幕宽度一行最多显示图片（web响应）且页面居中的脚本。demo点击这（改变你的窗口大小观察自适应看效果）

宽屏显示：

窄屏显示：

由上图对比可以看到，中间部分始终居中，但是会根据屏幕的大小判断一行最多显示多少张图片。让框架居中有多种方法，最常见的是添加 margin：0 auto；

因为我们要让整个屏幕显示至多张图，所以我只要求得屏幕至多能放下多少个图片后，剩下的数平均分给左右外边距，这样即能居中，例如：margin：10px auto

html代码：

<div class="container" style="margin:0 auto;"><div class="aside"></div><div class="photo_box"><div class="photo_img"><img src="1.jpg" alt="" width="" height="" /></div><div class="photo_img"><img src="2.jpg" alt="" width="" height="" /></div></div>...
</div>

js代码：

 $(document).ready($onresize = function(){var Winh = $(window).width(), Wimg = $(".photo_img").width() + 38,
Wsidebar = $(".aside").width() + 24;var mainWidth = Winh - Wsidebar;var imgBs = mainWidth % Wimg;  //imgBs为最多放下图片后剩下的余数var a = Math.floor( imgBs / 2); //余数平分即为外边距大小$(".container").css("margin-left", a );$(".container").css("margin-right", a );})$(window).bind("resize", $onresize);

ps：有一个很重要的问题，必须给html强制滚动条，否则，在某些显示器下，会出现切边的效果，其实是因为开始算屏幕宽度的时候，滚动条还没加载出来，宽度会算多一点，这样，这样左右的外边距大于实际边距，就发生了切边的效果。像这样：html{ overflow:scroll; }

这个想法就像是小时候做的数学题，一块多大面积的蛋糕，切成每份多大，最多能分给多少人，这里只是加了一个居中的条件。然后当浏览器改变大小的时候，也会重新加载一次，算一次。而图片的位移会使用Masonry.js这个库的动态效果，整个过程很流畅，如果网速不限制，显示的效果是非常好的。

再狠狠的点击这个看这个效果吧：demo点击这

转载于:https://www.cnblogs.com/xingmeng/p/3375829.html

jQuery Masonry构建pinterest网站布局注意要点(转)相关推荐

【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局(转)
[jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局时间:2011年03月21日作者:愚人码头查看次数:29,744 views评论次数:25条评论前段时间领导 ...
用jQuery Masonry快速构建一个pinterest网站布局
用jQuery Masonry快速构建一个pinterest网站布局 [jQuery插件]用jQuery Masonry快速构建一个pinterest网站布局 http://masonry.desan ...
【jQuery插件】用jQuery Masonry快速构建一个pinterest网站布局
转自:http://www.css88.com/archives/3321 前段时间领导给我看了一个网站:http://pinterest.com/, Pinterest 这个名字还算容易理解:「Pi ...
HTML瀑布流布局实现网易LOFTER——masonry响应式网格布局库（非jQuery）
HTML瀑布流布局--masonry响应式网格布局库(非jQuery) 瀑布流布局是流式布局的一种.是当下比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会 ...
6款强大的jQuery插件创建和加强网站布局
Javascript 打开了web设计的大门,给了Html和CSS更宽广的舞台.HTML5和CSS3,又比从前进步了一大截.神奇的根源来自JavaScript,它可以向你的网站布局中加入交互元素.以j ...
jQuery Masonry 一个 jQuery动态网格布局的插件
jQuery Masonry 是一个 jQuery动态网格布局的插件. 每个元素都是漂浮在固定的网格布局上面,就像一枚图钉定在墙上一样. 我们发现以下的15网站使用jQuery Masonry的范例. ...
《从零构建前后分离的web项目》：前端完善 - 手把手教你快速构建网站布局
添砖加瓦 - 手把手教你快速构建网站布局项目地址本章源码地址文章地址本文为方便讲述重构去除了 Element.vux 库,用了最近比较火的 bulma 轻量.快捷.易读. 项目截屏 Layou ...
Masonry – 实现 Pinterest 模式的网格砌体布局
Masonry 是一款 JavaScript 网格布局插件,可以实现类似 Pinterest 模式的砌体布局效果.通过把元素自动填充在垂直的空白区域,就像墙上堆砌的石头一样.这个库还可以作为 jQue ...
html如何制作响应式网站,使用HTML和CSS构建响应式网站布局
大多数现代网站使用响应式网页设计,现在您必须考虑实际反应的意义,响应式网站可以适应不同的屏幕尺寸,并可以相应地调整其设计和布局. 在本教程中,我们将学习如何使用HTML和CSS进行响应式网站设计,但首 ...

jQuery Masonry构建pinterest网站布局注意要点(转)

jQuery Masonry构建pinterest网站布局注意要点(转)相关推荐

最新文章

热门文章