标签: jquery-masonry
Isotope和Masonry jQuery插件之间的差异
我最近发现了Masonry和Isotope JQuery插件.它们似乎在功能上几乎完全相同,似乎都有相同的作者.我能看到的唯一明显区别是许可证.
这两者在功能方面有哪些主要区别？你为什么要用另一个呢？
javascript jquery jquery-plugins jquery-masonry jquery-isotope
推荐指数
解决办法
查看次数
是否可以仅使用Bootstrap创建类似pinterest的布局？
我正试图让我的头脑现在已经有一段时间了:
是否可以仅使用Twitter Bootstrap创建一个pinterest布局？我知道有像砌体这样的jQuery插件,但没有它们没有办法吗？
谢谢
推荐指数
解决办法
查看次数
jQuery Masonry和Ajax附加项目？
我试图使用一些ajax和jQuery Masonry插件来添加一些项目 - 但由于某种原因,新项目没有得到砌体应用？
我正在使用
jQuery.ajax({
type: "POST",
url: ajax_url,
data: ajax_data,
cache: false,
success: function (html) {
if (html.length > 0) {
jQuery("#content").append(html).masonry( 'appended', html, true );
}
});
});
然而,随后附加的项目没有class="masonry-brick"应用,这意味着它们完全填满了定位？
推荐指数
解决办法
查看次数
砌体JS重叠项目
我在这里有一个非常奇怪的问题:[推荐链接删除].第一行产品项与第二行中的项重叠.
砌体项目位于页脚上方的主页下方.如您所见,Chrome看起来与众不同.在Firefox中,它看起来不错.
以下是我在Chrome中的外观:http://clip2net.com/s/5LIRko
我的jQuery代码是:
jQuery(function($){
var $container = $('.woocommerce ul.products');
$container.masonry({
columnWidth:10,
gutterWidth: 15,
itemSelector: '.product-category'
});
});
是否存在影响行输出的css规则？
推荐指数
解决办法
查看次数
如何使用jQuery砌体与不同宽度的元素？
我正在实现jQuery Masonry插件,但是我遇到的问题是元素宽于一列,这意味着所有Masonry元素的div宽度并不相同.有人可以帮帮我吗？
<!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>Test</title>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/masonry.min.js" type="text/javascript"></script>
</head>
<style>
.item0,.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8{float:left; margin: 10px;
background:#999;}
.item1,.item0 {
width:300px;
}
.item2 {
width:200px;
}
.item3,.item8 {
width:100px;
}
.item4,.item5,.item6,.item7{
width:100px;
}
#container{
float:left; width:1000px;
}
</style>
<script type="text/javascript">
$(function(){
$('#container').masonry(
{});
});
</script>
<body>
<div id="container">
<div class="item0">1 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df …推荐指数
解决办法
查看次数
jQuery:像砌体这样的插件可以克服dom-order和3个项目大小
这可能很难解释.是否有类似jQuery砌体的类似插件能够检测预定义网格中的空间并移动和定位适合此空间的元素？
由于所有其他解释我的问题的方法都会变得复杂,我画了一个简单的图像来表明我的意思.
注意:这是一个流畅的响应式网页设计.
所以我的dom-order是1,2,3.然而,当我在一定范围内折叠我的布局时,media-query我想动态地切换dom顺序或以不同方式定位元素.就像你在我的样本中看到的一样.
我知道有像jQuery Masonry或jQuery Isotope这样的东西,但这两个插件都没有填满网格的所有空白区域.看看这个同位素截图...
缺少一个元素.当然,在大多数情况下,这是您希望保持元素顺序的内容.在我的情况下,我不关心订单,我只想填补所有空间和空白.因此,就像你在上面看到我的草图一样,item-nr-3应该向上移动以适应空隙(因为它适合).如果有另一个item相同的尺寸,它将适合下面的间隙item-nr-3.
这有可能吗？是否有一些jQuery插件可以做到这一点？或者你还有其他的idaes？
一些额外的信息:items我正在谈论
的和盒子都设置为box-sizing:border-box所以我不必担心填充或边距.
更新: 以下是问题的实时示例:http://jsfiddle.net/r79u2/1/
推荐指数
解决办法
查看次数
与Bootstrap 3的砌体
当使用bootstrap 3和Desandro的砌体时,我陷入一个奇怪的问题,似乎一旦调用了Masonry,我的图像宽度会增加额外的10px,导致砌体从所需的3列变为2(但仍在2中正常工作).我最好的猜测是,这必须与Bootstrap的新.img响应类有关.
这个问题可以在这里看到:http://jsfiddle.net/68qxE/2/(只是要确保扩展结果的宽度),但如果你更喜欢:
这是我的HTML:
<div class="container">
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<a href="/posts/1"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" /></a>
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<a href="/posts/2"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" /></a>
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<a href="/posts/3"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" /></a>
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<a href="/posts/4"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" /></a>
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<a href="/posts/5"><img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" /></a>
</div>
</div>
这是我的Javascript:
$(document).ready(function(){
var $container = $('.container');
$container.imagesLoaded( …推荐指数
解决办法
查看次数
使用Masonry.JS和Vue.JS
我知道如何使用masonry.js除了vue.但是,我有问题让它运行并在vue框架内正确调用.我在创建或准备好的内部调用它,但似乎都没有正确形成网格.我怎样才能让这个在框架内工作？哦,我确实在此脚本之前的html中调用了jquery.这是组件内部的内容:
编辑:
我可以看到砌体通过使用JS指定其高度并将项目更改为绝对位置来影响网格.但是,它没有正确放置它们.它将它们堆叠在彼此上面而不是像它应该在网格中的并排侧面.
<template>
<div class="projects--container">
<div class="inner-section inner--options">
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</div>
</div>
</template>
<script>
export default{
ready: function () {
this.mason();
},
data: function () {
return {
options: [
{
option: 'projects',
phrase: 'for clients',
slogan: 'slogan...'
},
{
option: 'sides',
phrase: 'for us',
slogan: 'we love what we make'
},
{
option: 'moments',
phrase: 'with the crew'
}
]
}
},
methods: {
revert: function () {
this.$dispatch('return-home', …推荐指数
解决办法
查看次数
jQuery砌体,百分比宽度
有没有办法让jquery砌体使用百分比宽度div？我正在尝试创建一个25%,50%,75%和100%宽度的流畅布局.但是一旦我用%设置宽度,自动调整大小就会停止工作,如果我尝试手动触发mason onresize,我会得到舍入错误,使div跳转.它有时会忽略高度变得非常错误,有时只是停止放置div并将它们全部放在0,0上
HTML标记:
<div class="boxes">
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-1">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-2">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div>
</div>
<div class="box weight-3">
<div class="inner">
<p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p>
</div> …推荐指数
解决办法
查看次数
结合LazyLoad和Jquery Masonry
我一直试图拼凑砌体和moo工具lazyload然而他们似乎都没有很好地在一起尽管它可能只是因为我在编码时有点无用!
砖石在这个页面上工作.
然而,当我尝试将它与lazyload放在一起时,它似乎完全陷入困境.有谁知道如何将两个插件一起实现？
我花了6天时间试图解决这个问题,这是我最后的希望哈!
谢谢
推荐指数
解决办法
查看次数
标签 统计
jquery-masonry ×10
jquery ×7
javascript ×4
ajax ×1
css ×1
grid ×1
layout ×1
lazy-loading ×1
vue.js ×1