标签: jquery-masonry
删除项目时刷新jquery.masonry
如何通过Ajax删除项目时刷新Masonry？这是我用来删除项目的代码:
if($deletes = $('a[rel=delete]')) {
$deletes.click(function() {
if(!window.confirm('Are you sure you wish to delete this picture?'))
return false;
$t = $(this);
$.post(
$t.attr('href'),
{},
function(data) {
if(data == "success")
$t.parents('.deleteable:first').fadeOut();
}
);
return false;
});
}
我想要刷新的原因是在删除项目后消除结果空格.
推荐指数
解决办法
查看次数
如何在Isotope的布局模式之间切换？
每个人都有两个问题:
1)如何打开和关闭同位素？
2)如何切换布局模式？也就是说,我该怎么做呢:
$('.content').isotope({ itemSelector : '.hentry',
layoutMode : 'cellsByRow',
cellsByRow : { columnWidth : 240, rowHeight : 360 } });
对此:
$('.content').isotope({ itemSelector : '.hentry',
layoutMode : 'masonry'});
用一个简单的点击开关？有任何想法吗？
谢谢!
推荐指数
解决办法
查看次数
JQuery砌体!更新columnWidth On Window Resize
我正在开发响应式布局,我也在使用JQuery Masonry.
我正在使用以下脚本来获取当前列宽.
var curWidth;
var detector;
detector = $('.magic-column');
curWidth = detector.outerWidth(true);
$(window).resize(function(){
if(detector.outerWidth(true)!=curWidth){
curWidth = detector.outerWidth(true);
}
});
我的JQuery Masonry init脚本是这样的..
$(window).load(function(){
$(function (){
$wall.masonry({
singleMode: true,
columnWidth: curWidth, // This needs to be update on window load & resize both //
});
});
});
我的第一个脚本是正确获取宽度,但在砌体中宽度没有更新...我如何实现加载和调整大小功能,以便我的curWidth将更新为Masonry以及窗口调整大小
推荐指数
解决办法
查看次数
我正在使用砖石,它没有给容器适当的高度,这就是为什么瓷砖内部错位
我正在使用砖石来显示内容,masonry.desandro.com,问题是它没有给容器适当的高度,就像你知道的那样,砌体动态地给容器和内部物品的边缘样式赋予高度,但它不起作用这应该.这是砖石js.
$(function(){
$('#ItemContainer').masonry({
// options
itemSelector : '.item'
});
});
这是我的html骨架
<html><body>
<div id="content">
<ul id="ItemContainer">
<li class="item">here li content with block style</li>
....more li's
</ul>
</div>
</body></html>
但是当我设置每个li的高度然后它工作正常,但它中的图像可以有任何高度,所以我必须保持其高度自动.第二行的项目首先重叠一半,第二行重叠,依此类推......每次它给ItemContainer提供426px的高度.
在这里我上传了我的代码... www.testingmycode.comuv.com/rough2.html ...请结账.它显示出不需要的行为,按重新加载,瓷砖在MS窗口中像卡片游戏那样排列,当你调整窗口大小时,它们排列正确...按浏览器重新加载按钮2-3次,调整窗口大小看到它们.请结帐.
推荐指数
解决办法
查看次数
如何为砌体创造良好的印花风格
我创建了一个包含不同项目的网页,其中包含使用jquery masonry插件的内容.我想为这个页面创建一个好的打印样式.打印时我想显示这个框的列表(从上到下).对于这些打印样式,我使用下面的CSS.由于某些原因,并非所有项目都显示在印刷版本中,只有前五个.
@media print {
#container .item{ display:block !important; float:none !important;
position:relative !important; left: !important; top:auto !important;
overflow:visible !important; width: 100% !important;
height: 100px !important; clear: left !important;
}
}
推荐指数
解决办法
查看次数
jQuery砌体空的空间
在这里摆弄 - 我需要它在立方体之间没有像示例那样的自由空间.就像Windows 8磁贴等等.而且我想留下砖石,没有同位素,因为砌筑是麻省理工学院许可证.可能吗？我用砖石设置搞砸了一点,但它没有帮助,所以我已经把它清理干净了.
$("#container").masonry();
推荐指数
解决办法
查看次数
CSS系统替代砌体
我记得一个替代Masonry(Vanilla)的CSS网格系统http://masonry.desandro.com/.该网站是黑色背景并显示/排列彩色框(周期表元素).它还有基于其形状和大小的过滤盒(如圆形,方形等).它还使用硬件加速.我花了很多时间找到它,但没有运气.谁知道这个网站？
推荐指数
解决办法
查看次数
具有固定宽度和高度的砌体？
我想要这样的东西
容器盒的宽度和高度都是固定的
盒子大小不同,如1*1或2*1或3*3和......但不大于4宽,3高
框上的数字是加载时框的索引
我试着写一个算法宽度这些条件
首先 - 将item1放在第一个位置(0,0)
第二个 - 第一个框创建2个位置:(0,1)和(1,0)
第三项 - 第2项应决定2个新位置,并适应最佳位置以减少差距
放置时,每个项目在其左上角和右下角产生2个新位置
我还必须检查容器和盒子区域的剩余区域,以检查容器是否已满
如果容器已满,则创建新容器并将其余项目放在那里
我发现了一些我的算法失败但我应该找到解决方案的例子
也许按区域和空间排序这些盒子是最简单的解决方案
但我不喜欢它becuz它beaks设计我的意思是在顶部更大的盒子和底部的小盒子:(这是不好加我想在infinte滚动上加载这些盒子然后我不知道我的下一个盒子大小是什么所以我不能根据地区放置它们
在我放弃之后,我检查了所有关于这种设计的插件
像同位素和砖石和香草砖石和格栅和......
我试着定制同位素
JSfiddle链接显示我的尝试 链接
<a href="#" id="good">Shuffle</a> |
<a href="#" id="bad">Original order (broken)</a>
<div id="container">
<div class="item w1 h1">1</div>
<div class="item w2 h1">2</div>
<div class="item w1 h2">3</div>
<div class="item w1 h1">4</div>
<div class="item w2 h2">5</div>
<div class="item w2 h1">6</div>
<div class="item w1 h1">7</div>
<div class="item w1 h1">8</div>
<div class="item w1 h2">9</div>
<div class="item w2 h2">10</div>
<div class="item w2 h1">11</div> …推荐指数
解决办法
查看次数
在Ajax div刷新后,Jquery Masonry相互加载
我正在使用ajax刷新包含图像的div.我最初使用砌体来添加布局.
然后ajax调用返回一个使用html()方法刷新div的js.现在完成后我正在打电话masonry('reloadItems').但是砌筑将所有图像加载到另一个上.页面调整大小后,它的工作原理.我尝试手动触发页面调整大小,但它不会使砌体进行调整.
JS:
$('#timerange-select, #category_select').bind('change', function() {
form=$('#images-filter-form');
$.get(form.action, form.serialize(),function(){
var $container = $('#images_container');
$container.imagesLoaded(function(){$container.masonry('reloadItems');});
$(window).trigger('resize');
}, 'script');
});
好的,这个ajax请求的响应是:
$('#images_container').html('<%= escape_javascript(render("shared/random_issues")) %>');
所以我没有附加图片.我要更换容器是准确的.
这实际上是相互加载的10个图像.
编辑:请参阅http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495css和html.
推荐指数
解决办法
查看次数
砌体网格重叠页脚内容
我在grid课堂上使用过砌体布局,grid-items是专栏.我在加载事件上加载砌体,如下所示
$(window).load(function () {
$('.grid').masonry({
// options
itemSelector: '.grid-item',
horizontalOrder: true,
isAnimated: true,
animationOptions: {
duration: 1000,
easing: 'linear',
queue: false
}
});
});
我的HTML在下面,我正在通过ajax加载项目.有时它负载正确,有时会重叠我的页脚内容或div.如下面的截图所示.
<div class="grid">
<div class="grid-item">
<img src="images/grid1.jpg" alt="Banner"></a>
</div>
</div>
推荐指数
解决办法
查看次数
标签 统计
jquery-masonry ×10
jquery ×9
css ×4
javascript ×2
ajax ×1
algorithm ×1
css3 ×1
html ×1
masonry ×1
toggle ×1