Comments (15)
Thank for report, let me look on that :)
from freewall.
Wow, I've tried to have a look at the code, that's a pretty complex algorithm!
All I can say is that the math of my test case is fine and the problem seems to be in the engine, as runtime.blocks width, for a reason I still don't understand, is calculated wrong.
Have you got a glimpse of something in the mean time?
from freewall.
Thank for spend your time to look on that. Btw I see the problem of you caculator the colFixed
it should be:
var colFixed = ((documentWrap + gutter) / colNum) - gutter;
instead of
var colFixed = Math.floor(documentWrap / colNum) - gutter;
and the code test:
console.log((colFixed * colNum + gutter * (colNum - 1)) + ' <= ' + documentWrap);
instead of:
console.log(colFixed + ' * ' + colNum + ' = ' + colFixed * colNum + ' <= ' + documentWrap);
The idea is: if layout have N columns (4) it will have (N - 1) gutters (3). That why in your test it works with gutter = 0.
from freewall.
Thank you for pointing me to a perfect fit math, but I still see the problem with freewall,
here's a live test with updated code http://jsbin.com/cefodagi/2/edit?html,output
try to resize the output window between 1025px and 1060px, still getting 3 columns instead of 6
do you see any other problem with the test case or that's effectively a miscalculation inside the engine?
from freewall.
Thanks for your test, it is really get problem in this case, I will try to find way to fix it.
Infact the problem is each block image has 2 columns instead of 1 (your expect).
You can inspect in the container then see the atribute data-total-col="6". That mean the layout have 6 columns.
Thanks again with nice catch ;)
from freewall.
Hello @kombai,
yes I'm getting 3 columns instead of 6 between 1025px and 1060px and 1 column instead of 2 around 340px but can't go further than a test case for debugging as the freewall algorithm is quite complex.
Have you got an idea of what could be wrong here?
from freewall.
The problem is block already make around with the columns.
Example in this case the cellW about 1044 / 6 = 204px, and the block have width ~ 310 so it make around of column: round(310 / 204) = 2.
from freewall.
Can you please explain the concept of block? What's the difference between block and cellW?
Why freewall uses this calculation var col = !width ? 0 : Math.round((width + gutterX) / cellW);
?
from freewall.
The block is the item, which created the layout. In the setting block is the selector:
selector: 'article',
in the code
var col = !width ? 0 : Math.round((width + gutterX) / cellW);
using for caculator a block have how many columns base on the width of block and gutterX, cellW.
cellW/cellH are unit for caculator. it same the columns witdh and row height.
from freewall.
If I understand well in that line of code you're checking how many column units the block should span basing the calculation on the original width of the block (data-width attribute) + gutterX, but in row 330 you're calculating cellW ignoring cellW passed from the parameters.
I'm not sure how to help you debug this, seems like the logic in the code is a bit tricky, I was looking to use freewall for a project but having trigger points for columns number is a requirement and this bug is a show stopper, sorry.
from freewall.
I'm sorry to hear you got the trouble with freewall. But could you give the requiment or the mockup of layout, maybe we have way to implement that.
example saw on your code:
var documentWrap = container.width();
if (documentWrap > 1024) {
var colNum = 6;
} else if (documentWrap > 768) {
var colNum = 4;
} else {
var colNum = 2;
}
I assume you want to show 6 blocks when document > 1024, and 4 blocks for 768 right.. ?
For do that you can follow try with this:
- defined block with by css:
.for6col article {
width: 16.66%; /* 100 : 6 */
}
.for4col article {
width: 25%;
}
.for2col article {
width: 25%
}
var gutter = 50;
var container = $('#freewall');
function cellSize(containerWidth) {
if (containerWidth > 1024) {
var colNum = 6;
} else if (containerWidth > 768) {
var colNum = 4;
} else {
var colNum = 2;
}
return (containerWidth / colNum) - gutterW;
}
var wall = new freewall("#freewall");
wall.reset({
selector: 'article',
cellW: cellSize,
cellH: 'auto', // try to experiment also with cellSize (function) to get different weird behaviours
gutterX: gutter,
gutterY: gutter,
animate: true,
onResize: function (container) {
var containerWidth = container.width();
if (containerWidth > 1024) {
container.addClass("for6col").removeClass("for4col, for2col");
} else if (containerWidth > 768) {
container.addClass("for4col")...
} else {
container.addClass("for2col")...
}
wall.fitWidth();
}
});
wall.fitWidth();
Best
from freewall.
Thanks for the suggestion but it doesn't work, please check your code running here:
http://jsbin.com/jotigema/2/edit
it has the exact same problem.
from freewall.
Hi,
please try with this code:
<!DOCTYPE html>
<html>
<head>
<title>Flex layouts demo with freewall</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://vnjs.net/www/project/freewall/freewall.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
article {
float: left;
}
img {
display: block;
width: 100%;
height: auto;
}
.for6col article {
width: 16.66%;
}
.for4col article {
width: 25%;
}
.for2col article {
width: 50%
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var gutter = 20;
function cellSize(containerWidth) {
if (containerWidth > 1024) {
var colNum = 6;
} else if (containerWidth > 768) {
var colNum = 4;
} else {
var colNum = 2;
}
return (containerWidth / colNum) - gutter;
}
var wall = new freewall("#freewall");
wall.reset({
selector: 'article',
cellW: cellSize,
cellH: 'auto',
gutterX: gutter,
gutterY: gutter,
animate: true,
onResize: function (container) {
var containerWidth = container.width();
container.find("article")
.removeAttr("data-width")
.removeAttr("data-height")
.each(function () {
this.style.width = "";
this.style.height = "";
});
if (containerWidth > 1024) {
container.attr("class", "for6col");
} else if (containerWidth > 768) {
container.attr("class", "for4col");
} else {
container.attr("class", "for2col");
}
wall.fitWidth();
}
});
wall.fitWidth();
$(window).trigger("resize");
});
</script>
</head>
<body>
<div id="freewall">
<article>
<div class="block">
<div class="entry-content">
<img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
</div>
</div>
</article>
<article>
<div class="block">
<div class="entry-content">
<img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
</div>
</div>
</article>
<article>
<div class="block">
<div class="entry-content">
<img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
</div>
</div>
</article>
<article>
<div class="block">
<div class="entry-content">
<img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
</div>
</div>
</article>
<article>
<div class="block">
<div class="entry-content">
<img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
</div>
</div>
</article>
<article>
<div class="block">
<div class="entry-content">
<img src="http://lorempixel.com/250/250/animals/" width="250" height="250" />
</div>
</div>
</article>
</div>
</body>
</html>
The main think I add this block code:
container.find("article")
.removeAttr("data-width")
.removeAttr("data-height")
.each(function () {
this.style.width = "";
this.style.height = "";
});
for clean cache with caculator.
Best
from freewall.
In your latest code CSS is used for trigger points instead of Freewall. Freewall API is still broken as it doesn't respect the documented API and the passed cellW.
from freewall.
please check with this example:
http://vnjs.net/www/project/freewall/example/live-size.html
from freewall.
Related Issues (20)
- Keep tile ratio HOT 2
- fixSize: 0 not always keeping ratio HOT 2
- ImagesLayout + Filter = Impossible?
- Need data-position on block HOT 1
- Using Freewall with Media Queries/Breakpoints
- vnjs.net down? HOT 6
- Freewall with Easy Tabs
- Preview website not working HOT 2
- Wall extends beyond right edge when fitwidth is used HOT 1
- Square pictures get oversized
- Gap to the right of the grid.
- how can set freewall with bootstrap 3 ?
- Problem with right to left
- Wall items drops off over edge when using col-12
- Boxes that take up more than the visible columns disappearing
- Positioning of tiles broken in specific width
- Freewall Plugin
- On Drag do not push out / knock out other elements. Only swap with final item?
- Can Freewall make the grid as 2/3 , and 1/3 in grid?
- Lazy Loading Images On Scroll
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freewall.