masonry

Pinterest Style Layout with CSS, but stacked horizontally instead of vertically [duplicate]

由 China☆狼群 提交于 2020-01-11 05:22:05
问题 This question already has answers here : CSS-only masonry layout (2 answers) Closed 2 years ago . I'm trying to create a pinterest style layout without using Packery or any JS. I've tried using CSS3 columns, but they stack vertically. See the fiddle here , https://jsfiddle.net/2otpzbgt/1/ column-count: 3; is what I've used and the cards are appearing as 1, 6, 11 and so on. Is it possible to display as 1, 2, 3?? The purpose I'm trying to solve is a grid layout with dynamic content where images

js中瀑布式布局插件masonry与翻页插件infinitescroll结合

由 好久不见. 提交于 2020-01-08 21:05:29
转自： http://blog.csdn.net/feng2375/article/category/324578 首先在页面中引入 <script src="jquery-1.7.1.min.js"></script> <script src="jquery.masonry.min.js"></script> <script src="jquery.infinitescroll.js"></script> 排列body中的内容: <BODY> <div id="container"> <div class="item">a a a a a a</div> <div class="item">a a a a a a</div> <div class="item">a a a a a a</div> <div class="item">a a a a a a</div> </div> </BODY> 在js中调用插件： <script type="text/javascript"> $(function(){ $('#container').masonry({ // options 设置选项 itemSelector : '.item',//class 选择器 columnWidth : 240 ,//一列的宽度 Integer isAnimated:true,/

Reloading masonry content

由 点点圈 提交于 2020-01-07 03:04:41
问题 I am trying to update the layout of a masonry page when the height of an element is changed. I would like the elements to automatically re-fit like they do if you resize the window. I have tried numerous methods and am now at this which seems to do nothing: function masonryReload() { jQuery('#container').masonry('reloadItems'); } Am I missing something here or is there another method that is better suited to what I want? If anyone has any experience with this, it would be much appreciated.

Why are my divs not animating on scroll?

由 无人久伴 提交于 2020-01-06 13:53:01
问题 http://codepen.io/donnaloia/pen/IekLw I'm trying to replicate the tympanus demo using masonry and animonscroll.js. the only difference is I'm using div cards with images inside them instead of just images. Here is the working tympanus demo http://jsfiddle.net/Sfmv9/19/light/ And here is my code: http://codepen.io/macsupport/pen/eghEm You can see I have masonry working, but the anim on scroll effect is not working. I've actually been trying to figure this out for a few weeks, and just can't

在 JQuery Mobile 中实现瀑布流图库布局

由 ≯℡__Kan透↙ 提交于 2020-01-04 11:19:08
先来看在Windows系统的1080P显示器中显示的效果： 这个整合方式几乎没有现存的实例，是自己总结出来的方法，在此记录下来。 首先访问Masonry官网下载 masonry.pkgd.min.js ： http://masonry.desandro.com/ 将其整合到项目中，在页面中引入。 初始化id变量，让页面每次加载时的id都不同，避免 Ajax 加载时id重复造成难以察觉的错误。 var id = "gallerycontent" + Guid.NewGuid(); 采用HTML初始化方式进行初始化： <div id="@id" style="margin: 50px auto;" class="js-masonry" data-masonry-options='{ "isFitWidth": true, "itemSelector": ".post" }'> .... .... .... </div> 以上为外部容器代码。id属性使用前面的变量；style属性和后面的isFitWidth选项共同实现了容器自动水平方向居中功能；我没有像Masonry入门教程那样指定列宽选项，我觉得貌似对我的项目没什么用，通过css盒模型即可较好地控制图片区块的列宽和间距。 内部图片区块的伪代码： <div class="post" style="height:@(260/1.0

layout / masonry - delayed layout adjustment - one click behind

由 为君一笑 提交于 2020-01-03 01:41:09
问题 Ok, so here is the problem https://jsfiddle.net/yq7f1a63/1/ Here is my code: $(function () { $('.content').hide(); $('a.read').click(function () { $(this).parent('.excerpt').hide(); $(this).closest('li').find('.content').slideDown('fast'); $('ul').masonry('layout'); return false; }); $('a.read-less').click(function () { $(this).parent('.content').slideUp('fast'); $(this).closest('li').find('.excerpt').show(); $('ul').masonry('layout'); return false; }); }); $('ul').masonry({ itemSelector: 'li

CSS column count causing items to split columns

由 杀马特。学长 韩版系。学妹 提交于 2020-01-02 13:33:33
问题 Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives. I am trying to use column count, which appears to be working but not as expected. So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example: http://jsfiddle.net/DTcHh/3858/ #builds { width: 100%; } .cols { -moz-column-count:4; -moz-column-gap: 3%; -moz-column-width: 25%; -webkit-column-count:4; -webkit-column-gap:

Masonry with Sidebar - Bootstrap

由 扶醉桌前 提交于 2019-12-25 08:58:27
问题 The page should be divided into 4 rows. Masonry should align the posts within 3 rows. At the right the sidebar is going to be shown. This should be within the last row. However, Masonry mix everything and won't let me have a sidebar at the right. HTML <div class="container"> <div id="masonry-container" class="row nomargin"> <div class="col-md-9"> <div class="item col-lg-4 col-md-4 col-sm-4"> <!--- Content ---> </div> </div> <div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12 rightfloat"> <!

Masonry Overlapping (Imbalance2 Bug)

由 僤鯓⒐⒋嵵緔 提交于 2019-12-25 04:44:02
问题 I built my site with Wordpress.org and the theme calls Imbalance2. I noticed that this theme has a bug and I searched topics about the overlapping issue because of Masonry js. I use the imagesLoaded (from user Leger at Using masonry with imagesloaded, thanks!): it works but sometimes my Chrome stills overlapping. I decide to add a pagination instead the "Lazy Load" (to avoid more problems…) but I can't merge imagesLoaded for #boxes and #related… Could you please help me? Here my site address

Masonry grid not showing properly

由 我怕爱的太早我们不能终老 提交于 2019-12-24 14:02:22
问题 here i am trying to get the masonry grid to my bootstrap row values. but when i initiate the masonry grid i am getting the grid with lots of space between the items in below rows. how can i resolve this? FULL HTML: <!DOCTYPE html> <html> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <style> .grid-item {width:400px;} </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="grid"> <div class="col-xs-10 col-sm-4
订阅 masonry